<template>
  <div class="widgepic">
    <div class="widgepic_main">
      <el-row
        :gutter="24"
        justify="space-between"
        style="margin-left: 0px;margin-right: 0px;width:100%;height:100%"
      >
        <el-col
          :span="8"
          style="padding-left:0px;padding-right:0px;height:100%"
        >
          <!-- 左侧上传/展示 -->
          <el-card :body-style="{ padding: '0px' }">
            <div class="main_box" :style="{ height: cardheight + 'px' }">
              <!-- 营销推广图 -->
              <div v-show="leftshow == 1">
                <div class="show_top1">
                  <div class="uploadradio">
                    <el-radio-group
                      v-model="uploadradio"
                      @change="uplradchange"
                    >
                      <el-radio :label="1">
                        <div>
                          <div class="pic1"></div>
                        </div>
                      </el-radio>
                      <el-radio :label="2">
                        <div>
                          <div class="pic2"></div>
                        </div>
                      </el-radio>
                      <el-radio :label="3">
                        <div>
                          <div class="pic3"></div>
                        </div>
                      </el-radio>
                      <el-radio :label="4" style="margin-right: 0px">
                        <div>
                          <div class="pic4"></div>
                        </div>
                      </el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <!-- 渲染dom -->
                <div class="canvas_box">
                  <div id="mycanvas" class="mycanvas" ref="mycanvas">
                    <div v-if="uploadradio == 1" class="uploadradio1">
                      <div class="uploadone" @mouseenter="enterdiv('imgone')">
                        <div v-if="imgone == ''" style="width:100%;height:100%">
                          <el-upload
                            style="width:272px;height:272px;margin:0 auto"
                            class="avatar-uploader"
                            :action="uploadaction"
                            :on-success="uploadSuccess1"
                            :on-error="uploadError"
                            :limit="1"
                            :multiple="false"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                          >
                            <div
                              style="width:100%;height:100%;line-height:270px;background-color:#fff;border-radius:12px"
                            >
                              <div style="font-size:35px;color:blue;">
                                <i class="el-icon-plus avatar-uploader-icon">
                                  <div style="font-size:14px">
                                    点击上传图片
                                  </div>
                                </i>
                              </div>
                            </div>
                          </el-upload>
                        </div>
                        <div v-else class="img_box">
                          <el-image
                            style="width: 100%; height: 100%"
                            :src="imgone"
                            fit="fill"
                            crossOrigin="Anonymous"
                          ></el-image>
                          <i class="el-icon-close" @click="closeimg(1)"></i>
                        </div>
                      </div>
                      <div class="display">
                        <div class="uploadtwo" @mouseenter="enterdiv('imgtwo')">
                          <div
                            v-if="imgtwo == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:136px;height:136px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess2"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:136px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgtwo"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(2)"></i>
                          </div>
                        </div>
                        <div
                          class="uploadtwo"
                          @mouseenter="enterdiv('imgthree')"
                        >
                          <div
                            v-if="imgthree == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:136px;height:136px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess3"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:136px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgthree"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(3)"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-if="uploadradio == 2" class="uploadradio1">
                      <div class="display">
                        <div
                          class="uploadthree"
                          @mouseenter="enterdiv('imgone')"
                        >
                          <div
                            v-if="imgone == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:136px;height:167px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess1"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:167px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgone"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(1)"></i>
                          </div>
                        </div>
                        <div
                          class="uploadthree"
                          @mouseenter="enterdiv('imgtwo')"
                        >
                          <div
                            v-if="imgtwo == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:136px;height:167px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess2"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:167px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgtwo"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(2)"></i>
                          </div>
                        </div>
                      </div>
                      <div class="display">
                        <div
                          class="uploadthree"
                          @mouseenter="enterdiv('imgthree')"
                        >
                          <div
                            v-if="imgthree == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:136px;height:167px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess3"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:167px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgthree"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(3)"></i>
                          </div>
                        </div>
                        <div
                          class="uploadfour"
                          @mouseenter="enterdiv('imgfour')"
                        >
                          <div
                            v-if="imgfour == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:136px;height:167px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess4"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:167px;background-color:#fff;border-radius:12px"
                              >
                                <div style="font-size:35px;color:blue;">
                                  <i class="el-icon-plus avatar-uploader-icon">
                                    <div style="font-size:14px">
                                      点击上传图片
                                    </div>
                                  </i>
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgfour"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(4)"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-if="uploadradio == 3" class="uploadradio1">
                      <div class="uploadone" @mouseenter="enterdiv('imgone')">
                        <div v-if="imgone == ''" style="width:100%;height:100%">
                          <el-upload
                            style="width:272px;height:272px;margin:0 auto;"
                            class="avatar-uploader"
                            :action="uploadaction"
                            :on-success="uploadSuccess1"
                            :on-error="uploadError"
                            :limit="1"
                            :multiple="false"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                          >
                            <div
                              style="width:100%;height:100%;line-height:270px;background-color:#fff;border-radius:12px"
                            >
                              <div style="font-size:35px;color:blue;">
                                <i class="el-icon-plus avatar-uploader-icon">
                                  <div style="font-size:14px">
                                    点击上传图片
                                  </div>
                                </i>
                              </div>
                            </div>
                          </el-upload>
                        </div>
                        <div v-else class="img_box">
                          <el-image
                            style="width: 100%; height: 100%"
                            :src="imgone"
                            fit="fill"
                            crossOrigin="Anonymous"
                          ></el-image>
                          <i class="el-icon-close" @click="closeimg(1)"></i>
                        </div>
                      </div>
                      <div class="uploadone" @mouseenter="enterdiv('imgtwo')">
                        <div v-if="imgtwo == ''" style="width:100%;height:100%">
                          <el-upload
                            style="width:272px;height:272px;margin:0 auto;"
                            class="avatar-uploader"
                            :action="uploadaction"
                            :on-success="uploadSuccess2"
                            :on-error="uploadError"
                            :limit="1"
                            :multiple="false"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                          >
                            <div
                              style="width:100%;height:100%;line-height:270px;background-color:#fff;border-radius:12px"
                            >
                              <div style="font-size:35px;color:blue;">
                                <i class="el-icon-plus avatar-uploader-icon">
                                  <div style="font-size:14px">
                                    点击上传图片
                                  </div>
                                </i>
                              </div>
                            </div>
                          </el-upload>
                        </div>
                        <div v-else class="img_box">
                          <el-image
                            style="width: 100%; height: 100%"
                            :src="imgtwo"
                            fit="fill"
                            crossOrigin="Anonymous"
                          ></el-image>
                          <i class="el-icon-close" @click="closeimg(2)"></i>
                        </div>
                      </div>
                    </div>
                    <div v-if="uploadradio == 4" class="uploadradio1">
                      <div class="uploadone" @mouseenter="enterdiv('imgone')">
                        <div v-if="imgone == ''" style="width:100%;height:100%">
                          <el-upload
                            style="width:272px;height:272px;margin:0 auto;"
                            class="avatar-uploader"
                            :action="uploadaction"
                            :on-success="uploadSuccess1"
                            :on-error="uploadError"
                            :limit="1"
                            :multiple="false"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                          >
                            <div
                              style="width:100%;height:100%;line-height:270px;background-color:#fff;border-radius:12px"
                            >
                              <div style="font-size:35px;color:blue;">
                                <i class="el-icon-plus avatar-uploader-icon">
                                  <div style="font-size:14px">
                                    点击上传图片
                                  </div>
                                </i>
                              </div>
                            </div>
                          </el-upload>
                        </div>
                        <div v-else class="img_box">
                          <el-image
                            style="width: 100%; height: 100%"
                            :src="imgone"
                            fit="fill"
                            crossOrigin="Anonymous"
                          ></el-image>
                          <i class="el-icon-close" @click="closeimg(1)"></i>
                        </div>
                      </div>
                    </div>
                    <!-- 定位活动标签 -->
                    <!-- @mousemove="movechange($event)" -->
                    <div
                      ref="showtabs"
                      class="show_tabs"
                      :style="{
                        top: potop,
                        left: poleft
                      }"
                      @mousedown="movedown($event)"
                    >
                      <!-- 长标签 -->
                      <div
                        v-if="graphradio == 1"
                        class="show_img"
                        :style="{
                          backgroundImage: 'url(' + graphBgImg + ')'
                        }"
                      >
                        <p
                          class="show_title"
                          :style="{
                            color: title_color1,
                            fontSize: title_size1 + 'px',
                            fontFamily: title_famiy1
                          }"
                        >
                          {{ title1 }}
                        </p>
                        <div class="show_info">
                          <p
                            :style="{
                              color: title_color2,
                              fontSize: title_size2 + 'px',
                              fontFamily: title_famiy2
                            }"
                          >
                            {{ title2 }}
                          </p>
                          <div
                            :style="{
                              color: title_color3,
                              fontSize: title_size3 + 'px',
                              fontFamily: title_famiy3,
                              borderTop: title_border3
                            }"
                          >
                            {{ title3 }}
                          </div>
                        </div>
                        <i class="el-icon-close" @click="closediv"></i>
                      </div>
                      <!-- 圆标签 -->
                      <div
                        v-if="graphradio == 2"
                        class="show_img2 active"
                        :style="{
                          backgroundImage: 'url(' + graphBgImg + ')'
                        }"
                      >
                        <p
                          class="show_title sh1"
                          :style="{
                            color: title_color1,
                            fontSize: title_size1 + 'px',
                            fontFamily: title_famiy1
                          }"
                        >
                          {{ title1 }}
                        </p>
                        <p
                          class="show_title "
                          :style="{
                            color: title_color2,
                            fontSize: title_size2 + 'px',
                            fontFamily: title_famiy2,
                            fontWeight: 700
                          }"
                        >
                          {{ title2 }}
                        </p>
                        <div
                          class="show_title"
                          :style="{
                            color: title_color3,
                            fontSize: title_size3 + 'px',
                            fontFamily: title_famiy3,
                            borderTop: title_border3
                          }"
                        >
                          {{ title3 }}
                        </div>

                        <i class="el-icon-close" @click="closediv"></i>
                      </div>
                      <!-- 小标签 -->
                      <div v-if="graphradio == 3">
                        <div v-if="smallLabel == 1" class="iconfont_box">
                          <i
                            class="iconfont icon-tb_halfround icon_i"
                            :style="{
                              color: icfontcolor,
                              fontSize: '40px'
                            }"
                          ></i>
                          <!-- 文字一 -->
                          <p
                            class="sh2"
                            :style="{
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                        </div>
                        <div v-if="smallLabel == 2" class="iconfont_box">
                          <i
                            class="iconfont icon-tb_halfround icon_i"
                            :style="{
                              transform: 'rotateY(180deg)',
                              color: icfontcolor,
                              fontSize: '40px'
                            }"
                          ></i>
                          <!-- 文字一 -->
                          <p
                            class="sh2"
                            :style="{
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                        </div>
                        <div
                          v-if="smallLabel == 3"
                          class="iconfont_box"
                          style="overflow:hidden"
                        >
                          <i
                            class="iconfont icon-tb_rightround icon_i"
                            :style="{
                              color: icfontcolor,
                              fontSize: '41px',
                              left: '-14px'
                            }"
                          ></i>
                          <!-- 文字一 -->
                          <p
                            class="sh2"
                            :style="{
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                        </div>
                        <div
                          v-if="smallLabel == 4"
                          class="iconfont_box"
                          style="overflow:hidden"
                        >
                          <i
                            class="iconfont icon-tb_rightround icon_i"
                            :style="{
                              transform: 'rotateY(180deg)',
                              color: icfontcolor,
                              fontSize: '41px',
                              left: '0px'
                            }"
                          ></i>
                          <!-- 文字一 -->
                          <p
                            class="sh2"
                            :style="{
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                        </div>
                        <div
                          v-if="smallLabel == 5"
                          class="iconfont_box"
                          style="width: 150px;height: 38px;overflow:hidden"
                        >
                          <i
                            class="iconfont icon-tb_topred icon_i"
                            :style="{
                              color: icfontcolor,
                              fontSize: '150px',
                              top: '-61px',
                              left: '-1px'
                            }"
                          ></i>
                          <!-- 文字一 -->
                          <p
                            class="sh2"
                            :style="{
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1,
                              lineHeight: '38px'
                            }"
                          >
                            {{ title1 }}
                          </p>
                        </div>
                        <div
                          v-if="smallLabel == 6"
                          class="iconfont_box"
                          style="width: 70px;height: 86px;overflow：didden"
                        >
                          <i
                            class="iconfont icon-tb_fire icon_i"
                            :style="{
                              color: icfontcolor,
                              fontSize: '85px',
                              top: '-3px',
                              left: '-7px'
                            }"
                          ></i>
                          <!-- 文字一 -->
                          <p
                            class="sh3"
                            :style="{
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                        </div>
                        <i class="el-icon-close" @click="closediv"></i>
                      </div>
                      <!-- 实拍图标签 -->
                      <div v-if="graphradio == 4">
                        <div
                          class="bg_box"
                          :style="{
                            width: '120px',
                            height: '120px',
                            border: '4px solid ' + bordercolor
                          }"
                        >
                          <!-- 文字一 -->
                          <p
                            class="bg_title"
                            :style="{
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                          <i
                            class="bg_h"
                            :style="{
                              borderTop: '1px dashed ' + bordercolor
                            }"
                          ></i>
                          <i
                            class="bg_s"
                            :style="{
                              borderLeft: '1px dashed ' + bordercolor
                            }"
                          ></i>
                        </div>
                        <i class="el-icon-close" @click="closediv"></i>
                      </div>
                      <!-- 聚划算 -->
                      <div v-if="graphradio == 5">
                        <div
                          class="show_img"
                          :style="{
                            height: '57px',
                            backgroundImage: 'url(' + graphBgImg + ')'
                          }"
                        >
                          <p
                            class="show_title"
                            :style="{
                              width: '208px',
                              height: '31px',
                              lineHeight: '31px',
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                          <div
                            class="show_info"
                            style="width: 100px;height: auto;justify-content: flex-end;"
                          >
                            <p
                              :style="{
                                textAlign: 'right',
                                color: title_color2,
                                fontSize: title_size2 + 'px',
                                fontFamily: title_famiy2
                              }"
                            >
                              {{ title2 }}
                            </p>
                            <div
                              :style="{
                                paddingBottom: '0px',
                                width: '100%',
                                height: '33px',
                                fontWeight: '400',
                                paddingRight: '7px',
                                textAlign: 'right',
                                color: title_color3,
                                fontSize: title_size3 + 'px',
                                fontFamily: title_famiy3,
                                borderTop: title_border3
                              }"
                            >
                              {{ title3 }}
                            </div>
                            <i
                              class="el-icon-close"
                              style="top: 5px;"
                              @click="closediv"
                            ></i>
                          </div>
                        </div>
                      </div>
                      <!-- 淘抢购 -->
                      <div v-if="graphradio == 6">
                        <div
                          class="show_img"
                          :style="{
                            height: '57px',
                            backgroundImage: 'url(' + graphBgImg + ')'
                          }"
                        >
                          <p
                            class="show_title"
                            :style="{
                              width: '208px',
                              height: '31px',
                              lineHeight: '31px',
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                          <div
                            class="show_info"
                            style="width: 100px;height: auto;justify-content: flex-end;"
                          >
                            <p
                              :style="{
                                textAlign: 'right',
                                color: title_color2,
                                fontSize: title_size2 + 'px',
                                fontFamily: title_famiy2
                              }"
                            >
                              {{ title2 }}
                            </p>
                            <div
                              :style="{
                                paddingBottom: '0px',
                                width: '100%',
                                height: '33px',
                                fontWeight: '400',
                                paddingRight: '7px',
                                textAlign: 'right',
                                color: title_color3,
                                fontSize: title_size3 + 'px',
                                fontFamily: title_famiy3,
                                borderTop: title_border3
                              }"
                            >
                              {{ title3 }}
                            </div>
                            <i
                              class="el-icon-close"
                              style="top: 5px;"
                              @click="closediv"
                            ></i>
                          </div>
                        </div>
                      </div>
                      <!-- 品牌自定 -->
                      <div v-if="graphradio == 7">
                        <div style="width: 320px;margin: 0 auto;">
                          <div
                            class="show_img"
                            :style="{
                              height: '57px',
                              backgroundImage: 'url(' + graphBgImg + ')',
                              backgroundRepeat: 'no-repeat',
                              backgroundSize: '100% 100%'
                            }"
                          >
                            <div
                              class="show_info"
                              style="width: 100px;left: 0px;bottom: 1px;text-align:left"
                            >
                              <p
                                :style="{
                                  textAlign: 'left',
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <div
                                :style="{
                                  paddingBottom: '0px',
                                  width: '100%',
                                  height: '33px',
                                  fontWeight: '400',
                                  paddingRight: '7px',
                                  textAlign: 'right',
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  borderTop: title_border3
                                }"
                              >
                                {{ title3 }}
                              </div>
                            </div>
                            <p
                              class="show_title"
                              :style="{
                                width: '208px',
                                height: '31px',
                                right: '0',
                                left: 'unset',
                                lineHeight: '31px',
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <!-- width: '208px',
                                  height: '31px',
                                  lineHeight: '31px', -->
                            <P
                              class="title4"
                              :style="{
                                color: title_color4,
                                fontSize: title_size4 + 'px',
                                fontFamily: title_famiy4
                              }"
                            >
                              {{ title4 }}
                            </P>
                            <i
                              class="el-icon-close"
                              style="top: -10px;"
                              @click="closediv"
                            ></i>
                          </div>
                        </div>
                      </div>
                      <!-- 自定义标签 -->
                      <div v-if="imgfive !== ''">
                        <div
                          class="bg_box2"
                          :style="{
                            width: '120px',
                            height: '120px',
                            borderRadius: '50%',
                            overflow: 'hidden'
                          }"
                        >
                          <div class="img_box">
                            <el-image
                              style="width: 100%; height: 100%; pointer-events: none;"
                              :src="imgfive"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <!-- <i class="el-icon-close" @click="closediv"></i> -->
                          </div>
                        </div>
                        <i class="el-icon-close" @click="closediv"></i>
                      </div>
                    </div>
                  </div>
                  <!-- 导出按钮 -->
                  <div style="margin-top:10px">
                    <el-button
                      type="primary"
                      style="width:300px"
                      @click="saveYXImg('mycanvas')"
                      >合 成</el-button
                    >
                  </div>
                </div>
              </div>
              <!-- 秒杀预告 -->
              <div v-show="leftshow == 2">
                <!-- 渲染dom -->
                <div class="canvas_box2">
                  <div id="miaocanvas" class="mycanvas" ref="miaocanvas">
                    <div style="position:relative">
                      <el-carousel
                        style="border-radius: 10px;"
                        indicator-position="none"
                        height="165px"
                        :autoplay="false"
                      >
                        <el-carousel-item
                          v-for="item in miaoimglist"
                          :key="item.url"
                        >
                          <el-image
                            style="width: 100%;"
                            :src="item.url"
                            fit="cover"
                            crossOrigin="Anonymous"
                          ></el-image>
                          <div class="position_box">
                            <p
                              class="show_title"
                              :style="{
                                fontWeight: '700',
                                lineHeight: '63px',
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <p
                              class="show_title"
                              :style="{
                                lineHeight: '40px',
                                color: title_color2,
                                fontSize: title_size2 + 'px',
                                fontFamily: title_famiy2
                              }"
                            >
                              {{ title2 }}
                            </p>
                          </div>
                        </el-carousel-item>
                      </el-carousel>
                    </div>
                    <div class="miaolist">
                      <el-radio-group
                        v-model="miaoradio"
                        @change="miaoradiochange"
                      >
                        <el-radio
                          v-for="(item, index) in miaoList"
                          :label="index"
                          :key="index"
                        >
                          <div class="miao_main">
                            <div
                              class="miao_img"
                              :style="{
                                height: '190px',
                                backgroundImage: item.isblue
                                  ? 'url(' + bgurlblue + ')'
                                  : 'url(' + bgurlorange + ')',
                                backgroundRepeat: 'no-repeat',
                                backgroundSize: '100% 100%'
                              }"
                            >
                              <div
                                class="miao_uploadone"
                                @mouseenter="enterdiv(6, index)"
                              >
                                <div
                                  v-if="item.imgurl == ''"
                                  style="width:170px;height:170px"
                                >
                                  <el-upload
                                    style="width:170px;height:170px;margin:0 auto;background-color:#fff;border-radius:12px"
                                    class="avatar-uploader"
                                    :action="uploadaction"
                                    :on-success="
                                      (res, file, fileList, val) => {
                                        uploadSuccess6(
                                          res,
                                          file,
                                          fileList,
                                          index
                                        );
                                      }
                                    "
                                    :on-error="uploadError"
                                    :limit="1"
                                    :multiple="false"
                                    :show-file-list="false"
                                    :before-upload="beforeAvatarUpload"
                                  >
                                    <div
                                      style="width:100%;height:100%;line-height:170px;"
                                    >
                                      <div style="font-size:35px;color:blue;">
                                        <div style="font-size:14px">
                                          点击上传图片{{ index + 1 }}
                                        </div>
                                      </div>
                                    </div>
                                  </el-upload>
                                </div>
                                <div v-else class="img_box">
                                  <el-image
                                    style="width:170px;height:170px"
                                    :src="item.imgurl"
                                    fit="fill"
                                    crossOrigin="Anonymous"
                                  ></el-image>
                                  <i
                                    class="el-icon-close"
                                    @click="closeimg(6, index)"
                                  ></i>
                                </div>
                              </div>
                              <div class="rigtitle">
                                <div class="toptie">
                                  <p
                                    class="show_title"
                                    :style="{
                                      color: item.font[0].title_color1,
                                      fontSize: item.font[0].title_size1 + 'px'
                                    }"
                                  >
                                    {{ item.font[0].title1 }}
                                  </p>
                                  <div v-if="composingstyle == 1">
                                    <p
                                      class="show_title"
                                      :style="{
                                        padding: '10px 0',
                                        textAlign: 'left',
                                        color: item.font[0].title_color2,
                                        fontSize:
                                          item.font[0].title_size2 + 'px'
                                      }"
                                    >
                                      原价:{{ item.font[0].title2 }}
                                    </p>
                                    <p
                                      class="show_title"
                                      :style="{
                                        padding: '10px 0',
                                        textAlign: 'left',
                                        color: item.font[0].title_color3,
                                        fontSize:
                                          item.font[0].title_size3 + 'px'
                                      }"
                                    >
                                      卷后价: {{ item.font[0].title3 }}
                                    </p>
                                  </div>
                                  <div v-else style="height:72px">
                                    <span
                                      :style="{
                                        padding: '10px 0',
                                        textAlign: 'left',
                                        color: item.font[0].title_color3,
                                        fontSize:
                                          item.font[0].title_size3 + 'px'
                                      }"
                                    >
                                      卷后: {{ item.font[0].title3 }}
                                    </span>
                                    <span
                                      :style="{
                                        textDecoration: 'line-through',
                                        padding: '10px 0',
                                        textAlign: 'left',
                                        color: item.font[0].title_color2,
                                        fontSize:
                                          item.font[0].title_size2 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title2 }}
                                    </span>
                                  </div>
                                  <p
                                    class="show_title"
                                    :style="{
                                      borderRadius: '4px 10px 10px 4px',
                                      height: '30px',
                                      lineHeight: '30px',
                                      backgroundImage: item.isblue
                                        ? 'linear-gradient(to right,#5770d4 0,#3a8ed6 50%,#26a2d7 100%)'
                                        : 'linear-gradient(to right,#fe8854 0,#ffba19 50%,#ffcf01 100%)',
                                      margin: '10px 0',
                                      textAlign: 'left',
                                      color: item.font[0].title_color4,
                                      fontSize: item.font[0].title_size4 + 'px'
                                    }"
                                  >
                                    {{ item.font[0].title4 }}
                                  </p>
                                </div>
                              </div>
                              <div
                                :style="{
                                  width: '44px',
                                  height: '33px',
                                  top: 0,
                                  left: 0,
                                  position: 'absolute',
                                  backgroundImage: item.isblue
                                    ? 'url(' + iconurlblue + ')'
                                    : 'url(' + iconurlorange + ')',
                                  backgroundRepeat: 'no-repeat'
                                }"
                              >
                                <!-- backgroundSize: '100% 100%' -->
                                <div
                                  style="color:white;line-height:33px;text-align:center"
                                >
                                  {{ index &lt; 10 ? "0" + (index+1) : index }}
                                </div>
                              </div>
                            </div>
                            <i
                              class="el-icon-close"
                              style="top: 11px;"
                              @click="colsemiaolist"
                            ></i>
                          </div>
                        </el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <!-- 新增按钮 -->
                  <div style="margin-top:10px">
                    <el-button
                      type="primary"
                      style="width:300px"
                      @click="doaddlist"
                      >添 加</el-button
                    >
                  </div>
                </div>
              </div>
              <!-- 爆款汇总 -->
              <div v-show="leftshow == 3">
                <!-- 渲染dom -->
                <div class="canvas_box3">
                  <div id="baocanvas" class="mycanvas" ref="baocanvas">
                    <div class="top_bg">
                      <div class="position_box">
                        <p
                          class="show_title"
                          :style="{
                            fontWeight: '700',
                            lineHeight: '63px',
                            color: title_color1,
                            fontSize: title_size1 + 'px',
                            fontFamily: title_famiy1
                          }"
                        >
                          {{ title1 }}
                        </p>
                        <p
                          class="show_title"
                          :style="{
                            lineHeight: '40px',
                            color: title_color2,
                            fontSize: title_size2 + 'px',
                            fontFamily: title_famiy2
                          }"
                        >
                          {{ title2 }}
                        </p>
                      </div>
                    </div>
                    <div class="miaolist">
                      <el-radio-group
                        v-model="baoradio"
                        @change="baoradiochange"
                      >
                        <el-radio
                          v-for="(item, index) in baoList"
                          :label="index"
                          :key="index"
                        >
                          <div class="miao_main">
                            <div
                              class="miao_img"
                              :style="{
                                height: '190px',
                                backgroundImage:
                                  item.status == 1
                                    ? 'url(' + baourlblue + ')'
                                    : item.status == 2
                                    ? 'url(' + baourlpurple + ')'
                                    : item.status == 3
                                    ? 'url(' + baourlred + ')'
                                    : 'url(' + baourlorange + ')',
                                backgroundRepeat: 'no-repeat',
                                backgroundSize: '100% 100%'
                              }"
                            >
                              <div
                                class="miao_uploadone"
                                @mouseenter="enterdiv(7, index)"
                              >
                                <div
                                  v-if="item.imgurl == ''"
                                  style="width:170px;height:170px"
                                >
                                  <el-upload
                                    style="width:170px;height:170px;margin:0 auto;background-color:#fff;border-radius:12px"
                                    class="avatar-uploader"
                                    :action="uploadaction"
                                    :on-success="
                                      (res, file, fileList, val) => {
                                        uploadSuccess7(
                                          res,
                                          file,
                                          fileList,
                                          index
                                        );
                                      }
                                    "
                                    :on-error="uploadError"
                                    :limit="1"
                                    :multiple="false"
                                    :show-file-list="false"
                                    :before-upload="beforeAvatarUpload"
                                  >
                                    <div
                                      style="width:100%;height:100%;line-height:170px;background-color:#fff;border-radius:12px"
                                    >
                                      <div style="font-size:35px;color:blue;">
                                        <div style="font-size:14px">
                                          点击上传图片{{ index + 1 }}
                                        </div>
                                      </div>
                                    </div>
                                  </el-upload>
                                </div>
                                <div v-else class="img_box">
                                  <el-image
                                    style="width:170px;height:170px"
                                    :src="item.imgurl"
                                    fit="fill"
                                    crossOrigin="Anonymous"
                                  ></el-image>
                                  <i
                                    class="el-icon-close"
                                    @click="closeimg(7, index)"
                                  ></i>
                                </div>
                              </div>
                              <div class="rigtitle">
                                <div class="toptie">
                                  <p
                                    class="show_title"
                                    :style="{
                                      color: item.font[0].title_color1,
                                      fontSize: item.font[0].title_size1 + 'px'
                                    }"
                                  >
                                    {{ item.font[0].title1 }}
                                  </p>
                                  <p
                                    :style="{
                                      width: '100%',
                                      overflow: 'hidden',
                                      height: '64px',
                                      paddingTop: '10px',
                                      textAlign: 'left',
                                      whiteSpace: 'initial',
                                      color: item.font[0].title_color2,
                                      fontSize: item.font[0].title_size2 + 'px'
                                    }"
                                  >
                                    {{ item.font[0].title2 }}
                                  </p>
                                  <div class="issue_box">
                                    <p
                                      class="show_title"
                                      :style="{
                                        width: '70px',
                                        height: '50px',
                                        lineHeight: '58px',
                                        textAlign: 'center',
                                        color: item.font[0].title_color3,
                                        fontSize:
                                          item.font[0].title_size3 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title3 }}
                                    </p>

                                    <p
                                      class="show_title"
                                      :style="{
                                        width: '40px',
                                        overflow: 'hidden',
                                        height: '30px',
                                        lineHeight: '21px',
                                        textAlign: 'center',
                                        color: item.font[0].title_color4,
                                        fontSize:
                                          item.font[0].title_size4 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title4 }}
                                    </p>
                                  </div>
                                </div>
                              </div>
                              <div
                                :style="{
                                  width: '56px',
                                  height: '50px',
                                  top: '-9px',
                                  left: 0,
                                  position: 'absolute',
                                  backgroundImage: 'url(' + baoicon + ')',
                                  backgroundRepeat: 'no-repeat',
                                  backgroundSize: '100% 100%'
                                }"
                              >
                                <div
                                  style="color:white;line-height:46px;text-align:center;font-size:23px;font-weight:700"
                                >
                                  {{ index &lt; 10 ? "0" + (index+1) : index }}
                                </div>
                              </div>
                            </div>
                            <i
                              class="el-icon-close"
                              style="top: 11px;"
                              @click="colsebaolist"
                            ></i>
                          </div>
                        </el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                  <!-- 新增按钮 -->
                  <div style="margin-top:10px">
                    <el-button
                      type="primary"
                      style="width:300px"
                      @click="addbaolist"
                      >添 加</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!-- 中间设置控制台 -->
        <el-col :span="9">
          <el-card :body-style="{ padding: '0px' }">
            <div class="main_box" :style="{ height: cardheight + 'px' }">
              <div class="main_top">
                <el-radio-group v-model="leftshow" @change="setchange">
                  <el-radio-button label="1">营销推广图</el-radio-button>
                  <el-radio-button label="2">秒杀预告</el-radio-button>
                  <el-radio-button label="3">爆款汇总</el-radio-button>
                </el-radio-group>
              </div>
              <div class="main_content">
                <div v-show="leftshow == 1">
                  <div class="graph_box">
                    <el-radio-group v-model="graphradio" @change="graphchange">
                      <el-radio
                        v-for="itme in graphList"
                        :key="itme.id"
                        :label="itme.id"
                      >
                        <span style="display:inline-block;width:55px">{{
                          itme.name
                        }}</span></el-radio
                      >
                    </el-radio-group>
                  </div>
                  <div class="setgraph_box">
                    <!-- 长标签 -->
                    <div v-if="graphradio == 1">
                      <div class="top_img" @click="showtabsdiv">
                        <div
                          style="padding-top: 22px;width: 320px;margin: 0 auto;"
                        >
                          <div
                            class="show_img"
                            :style="{
                              backgroundImage: 'url(' + graphBgImg + ')'
                            }"
                          >
                            <p
                              class="show_title"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <div class="show_info">
                              <p
                                :style="{
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <div
                                :style="{
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  borderTop: title_border3
                                }"
                              >
                                {{ title3 }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="set_box">
                        <!-- 风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >风格</span
                          >
                          <el-select
                            v-model="styleradio"
                            placeholder="请选择风格"
                            @change="stylechange"
                          >
                            <el-option
                              v-for="item in styleList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字一</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                          ></el-color-picker>
                          <el-select v-model="title_famiy1" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字二 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字二</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title2"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size2" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color2"
                          ></el-color-picker>
                          <el-select v-model="title_famiy2" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字三 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字三</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title3"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size3" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color3"
                          ></el-color-picker>
                          <el-select v-model="title_famiy3" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                    <!-- 圆标签 -->
                    <div v-if="graphradio == 2">
                      <div class="top_img" @click="showtabsdiv">
                        <div
                          style="padding-top: 22px;width: 320px;margin: 0 auto;"
                        >
                          <div
                            class="show_img2"
                            :style="{
                              backgroundImage: 'url(' + graphBgImg + ')'
                            }"
                          >
                            <!-- 文字一 -->
                            <p
                              class="show_title sh1"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <!-- 文字二 -->
                            <p
                              class="show_title"
                              :style="{
                                color: title_color2,
                                fontSize: title_size2 + 'px',
                                fontFamily: title_famiy2,
                                fontWeight: 700
                              }"
                            >
                              {{ title2 }}
                            </p>
                            <!-- 文字三 -->
                            <div
                              class="show_title"
                              :style="{
                                color: title_color3,
                                fontSize: title_size3 + 'px',
                                fontFamily: title_famiy3,
                                borderTop: title_border3
                              }"
                            >
                              {{ title3 }}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="set_box">
                        <!-- 风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >风格</span
                          >
                          <el-select
                            v-model="styleradio"
                            placeholder="请选择风格"
                            @change="stylechange"
                          >
                            <el-option
                              v-for="item in styleList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字一</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                          ></el-color-picker>
                          <el-select v-model="title_famiy1" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字二 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字二</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title2"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size2" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color2"
                          ></el-color-picker>
                          <el-select v-model="title_famiy2" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字三 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字三</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title3"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size3" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color3"
                          ></el-color-picker>
                          <el-select v-model="title_famiy3" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                    <!-- 小标签 -->
                    <div v-if="graphradio == 3">
                      <div class="graph3_box">
                        <!-- 一 -->
                        <el-radio-group v-model="smallLabel">
                          <el-radio :label="1" class="test">
                            <div class="top_img graph3" @click="showtabsdiv">
                              <div class="iconfont_box">
                                <i
                                  class="iconfont icon-tb_halfround icon_i"
                                  :style="{
                                    color: icfontcolor,
                                    fontSize: '40px'
                                  }"
                                ></i>
                                <!-- 文字一 -->
                                <p
                                  class="sh2"
                                  :style="{
                                    color: title_color1,
                                    fontSize: title_size1 + 'px',
                                    fontFamily: title_famiy1
                                  }"
                                >
                                  {{ title1 }}
                                </p>
                              </div>
                            </div>
                          </el-radio>
                          <el-radio :label="2">
                            <div class="top_img graph3" @click="showtabsdiv">
                              <div class="iconfont_box">
                                <i
                                  class="iconfont icon-tb_halfround icon_i"
                                  :style="{
                                    transform: 'rotateY(180deg)',
                                    color: icfontcolor,
                                    fontSize: '40px'
                                  }"
                                ></i>
                                <!-- 文字一 -->
                                <p
                                  class="sh2"
                                  :style="{
                                    color: title_color1,
                                    fontSize: title_size1 + 'px',
                                    fontFamily: title_famiy1
                                  }"
                                >
                                  {{ title1 }}
                                </p>
                              </div>
                            </div>
                          </el-radio>
                          <el-radio :label="3">
                            <div class="top_img graph3" @click="showtabsdiv">
                              <div class="iconfont_box" style="overflow:hidden">
                                <i
                                  class="iconfont icon-tb_rightround icon_i"
                                  :style="{
                                    color: icfontcolor,
                                    fontSize: '41px',
                                    left: '-14px'
                                  }"
                                ></i>
                                <!-- 文字一 -->
                                <p
                                  class="sh2"
                                  :style="{
                                    color: title_color1,
                                    fontSize: title_size1 + 'px',
                                    fontFamily: title_famiy1
                                  }"
                                >
                                  {{ title1 }}
                                </p>
                              </div>
                            </div>
                          </el-radio>
                          <el-radio :label="4">
                            <div class="top_img graph3" @click="showtabsdiv">
                              <div class="iconfont_box" style="overflow:hidden">
                                <i
                                  class="iconfont icon-tb_rightround icon_i"
                                  :style="{
                                    transform: 'rotateY(180deg)',
                                    color: icfontcolor,
                                    fontSize: '41px',
                                    left: '0px'
                                  }"
                                ></i>
                                <!-- 文字一 -->
                                <p
                                  class="sh2"
                                  :style="{
                                    color: title_color1,
                                    fontSize: title_size1 + 'px',
                                    fontFamily: title_famiy1
                                  }"
                                >
                                  {{ title1 }}
                                </p>
                              </div>
                            </div>
                          </el-radio>
                          <el-radio :label="5">
                            <div class="top_img graph3" @click="showtabsdiv">
                              <div
                                class="iconfont_box"
                                style="width: 150px;height: 38px;"
                              >
                                <i
                                  class="iconfont icon-tb_topred icon_i"
                                  :style="{
                                    color: icfontcolor,
                                    fontSize: '150px',
                                    top: '-55px',
                                    left: '0px'
                                  }"
                                ></i>
                                <!-- 文字一 -->
                                <p
                                  class="sh2"
                                  :style="{
                                    color: title_color1,
                                    fontSize: title_size1 + 'px',
                                    fontFamily: title_famiy1,
                                    lineHeight: '38px'
                                  }"
                                >
                                  {{ title1 }}
                                </p>
                              </div>
                            </div>
                          </el-radio>
                          <el-radio :label="6">
                            <div class="top_img graph3" @click="showtabsdiv">
                              <div
                                class="iconfont_box"
                                style="width: 70px;height: 86px;overflow：didden"
                              >
                                <i
                                  class="iconfont icon-tb_fire icon_i"
                                  :style="{
                                    color: icfontcolor,
                                    fontSize: '85px',
                                    top: '1px',
                                    left: '-7px'
                                  }"
                                ></i>
                                <!-- 文字一 -->
                                <p
                                  class="sh3"
                                  :style="{
                                    color: title_color1,
                                    fontSize: title_size1 + 'px',
                                    fontFamily: title_famiy1
                                  }"
                                >
                                  {{ title1 }}
                                </p>
                              </div>
                            </div>
                          </el-radio>
                        </el-radio-group>
                      </div>
                      <div class="set_box">
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字一</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                          ></el-color-picker>
                          <el-select v-model="title_famiy1" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 背景颜色 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >背景颜色</span
                          >
                          <el-color-picker
                            v-model="icfontcolor"
                          ></el-color-picker>
                        </div>
                      </div>
                    </div>
                    <!-- 实拍图标签 -->
                    <div v-if="graphradio == 4">
                      <div class="top_img" @click="showtabsdiv">
                        <div
                          style="padding-top: 22px;width: 130px;margin: 0 auto;"
                        >
                          <div
                            class="bg_box"
                            :style="{
                              border: '4px solid ' + bordercolor
                            }"
                          >
                            <!-- 文字一 -->
                            <p
                              class="bg_title"
                              :style="{
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <i
                              class="bg_h"
                              :style="{
                                borderTop: '1px dashed ' + bordercolor
                              }"
                            ></i>
                            <i
                              class="bg_s"
                              :style="{
                                borderLeft: '1px dashed ' + bordercolor
                              }"
                            ></i>
                          </div>
                        </div>
                      </div>
                      <div class="set_box">
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字一</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                          ></el-color-picker>
                          <el-select v-model="title_famiy1" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 背景颜色 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >边框颜色</span
                          >
                          <el-color-picker
                            v-model="bordercolor"
                          ></el-color-picker>
                        </div>
                      </div>
                    </div>
                    <!-- 聚划算 -->
                    <div v-if="graphradio == 5">
                      <div class="top_img" @click="showtabsdiv">
                        <div
                          style="padding-top: 22px;width: 320px;margin: 0 auto;"
                        >
                          <div
                            class="show_img"
                            :style="{
                              height: '57px',
                              backgroundImage: 'url(' + graphBgImg + ')'
                            }"
                          >
                            <p
                              class="show_title"
                              :style="{
                                width: '208px',
                                height: '31px',
                                lineHeight: '31px',
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <div
                              class="show_info"
                              style="width: 100px;height: auto;justify-content: flex-end;"
                            >
                              <p
                                :style="{
                                  textAlign: 'right',
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <div
                                :style="{
                                  paddingBottom: '0px',
                                  width: '100%',
                                  height: '33px',
                                  fontWeight: '400',
                                  paddingRight: '7px',
                                  textAlign: 'right',
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  borderTop: title_border3
                                }"
                              >
                                {{ title3 }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="set_box">
                        <!-- 风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >风格</span
                          >
                          <el-select
                            v-model="styleradio"
                            placeholder="请选择风格"
                            @change="stylechange"
                          >
                            <el-option
                              v-for="item in styleList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字一</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                          ></el-color-picker>
                          <el-select v-model="title_famiy1" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字二 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字二</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title2"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size2" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color2"
                          ></el-color-picker>
                          <el-select v-model="title_famiy2" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字三 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字三</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title3"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size3" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color3"
                          ></el-color-picker>
                          <el-select v-model="title_famiy3" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                    <!-- 淘抢购 -->
                    <div v-if="graphradio == 6">
                      <div class="top_img" @click="showtabsdiv">
                        <div
                          style="padding-top: 22px;width: 320px;margin: 0 auto;"
                        >
                          <div
                            class="show_img"
                            :style="{
                              height: '57px',
                              backgroundImage: 'url(' + graphBgImg + ')'
                            }"
                          >
                            <p
                              class="show_title"
                              :style="{
                                width: '208px',
                                height: '31px',
                                lineHeight: '31px',
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <div
                              class="show_info"
                              style="width: 100px;height: auto;justify-content: flex-end;"
                            >
                              <p
                                :style="{
                                  textAlign: 'right',
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <div
                                :style="{
                                  paddingBottom: '0px',
                                  width: '100%',
                                  height: '33px',
                                  fontWeight: '400',
                                  paddingRight: '7px',
                                  textAlign: 'right',
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  borderTop: title_border3
                                }"
                              >
                                {{ title3 }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="set_box">
                        <!-- 风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >风格</span
                          >
                          <el-select
                            v-model="styleradio"
                            placeholder="请选择风格"
                            @change="stylechange"
                          >
                            <el-option
                              v-for="item in styleList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字一</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                          ></el-color-picker>
                          <el-select v-model="title_famiy1" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字二 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字二</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title2"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size2" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color2"
                          ></el-color-picker>
                          <el-select v-model="title_famiy2" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字三 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字三</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title3"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size3" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color3"
                          ></el-color-picker>
                          <el-select v-model="title_famiy3" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                    <!-- 品牌自定 -->
                    <div v-if="graphradio == 7">
                      <div class="top_img" @click="showtabsdiv">
                        <div
                          style="padding-top: 22px;width: 320px;margin: 0 auto;"
                        >
                          <div
                            class="show_img"
                            :style="{
                              height: '57px',
                              backgroundImage: 'url(' + graphBgImg + ')',
                              backgroundRepeat: 'no-repeat',
                              backgroundSize: '100% 100%'
                            }"
                          >
                            <div
                              class="show_info"
                              style="width: 100px;left: 0px;bottom: 1px;text-align:left"
                            >
                              <p
                                :style="{
                                  textAlign: 'left',
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <div
                                :style="{
                                  paddingBottom: '0px',
                                  width: '100%',
                                  height: '33px',
                                  fontWeight: '400',
                                  paddingRight: '7px',
                                  textAlign: 'right',
                                  color: title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3,
                                  borderTop: title_border3
                                }"
                              >
                                {{ title3 }}
                              </div>
                            </div>
                            <p
                              class="show_title"
                              :style="{
                                width: '208px',
                                height: '31px',
                                right: '0',
                                left: 'unset',
                                lineHeight: '31px',
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <!-- width: '208px',
                                  height: '31px',
                                  lineHeight: '31px', -->
                            <P
                              class="title4"
                              :style="{
                                color: title_color4,
                                fontSize: title_size4 + 'px',
                                fontFamily: title_famiy4
                              }"
                            >
                              {{ title4 }}
                            </P>
                          </div>
                        </div>
                      </div>
                      <div class="set_box">
                        <!-- 风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >风格</span
                          >
                          <el-select
                            v-model="styleradio"
                            placeholder="请选择风格"
                            @change="stylechange"
                          >
                            <el-option
                              v-for="item in styleList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字一</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                          ></el-color-picker>
                          <el-select v-model="title_famiy1" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字二 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字二</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title2"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size2" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color2"
                          ></el-color-picker>
                          <el-select v-model="title_famiy2" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字三 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字三</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title3"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size3" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color3"
                          ></el-color-picker>
                          <el-select v-model="title_famiy3" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字四 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                            >文字四</span
                          >
                          <el-input
                            style="width:120px"
                            v-model="title4"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size4" style="width:70px">
                            <el-option
                              v-for="item in sizeList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color4"
                          ></el-color-picker>
                          <el-select v-model="title_famiy3" style="width:120px">
                            <el-option
                              v-for="item in famiyList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                      </div>
                    </div>
                    <!-- 自定义标签 -->
                    <div v-if="graphradio == 8">
                      <div class="top_img" @click="showtabsdiv">
                        <div
                          style="padding-top: 22px;width: 320px;margin: 0 auto;"
                        >
                          <div class="uploadfive">
                            <div
                              v-if="imgfive == ''"
                              style="width:100%;height:100%"
                            >
                              <el-upload
                                style="width:140px;height:140px;margin:0 auto;background-color:#fff;border-radius:12px"
                                class="avatar-uploader"
                                :action="uploadaction"
                                :on-success="uploadSuccess5"
                                :on-error="uploadError"
                                :limit="1"
                                :multiple="false"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload"
                              >
                                <div
                                  style="width:100%;height:100%;line-height:140px;"
                                >
                                  <div style="font-size:26px;color:blue;">
                                    <i
                                      class="el-icon-plus avatar-uploader-icon"
                                    >
                                      <div style="font-size:14px">
                                        点击上传图片
                                      </div>
                                    </i>
                                  </div>
                                </div>
                              </el-upload>
                            </div>
                            <div v-else class="img_box">
                              <el-image
                                style="width: 100%; height: 100%"
                                :src="imgfive"
                                fit="fill"
                                crossOrigin="Anonymous"
                              ></el-image>
                              <i class="el-icon-close" @click="closeimg(5)"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-show="leftshow == 2">
                  <div>
                    <div class="set_box">
                      <!-- 主题风格 -->
                      <div class="display" style="padding-top:20px;">
                        <span
                          style="dispaly:inline-block;width:70px;font-size:14px"
                          >主题风格</span
                        >
                        <el-select
                          v-model="stylechoose"
                          placeholder="请选择主题风格"
                          @change="stylechoosechange"
                        >
                          <el-option
                            v-for="item in stylechooseList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                      <!-- 排版风格 -->
                      <div class="display" style="padding-top:20px;">
                        <span
                          style="dispaly:inline-block;width:70px;font-size:14px"
                          >排版风格</span
                        >
                        <el-select
                          v-model="composingstyle"
                          placeholder="请选择排版风格"
                          @change="composingstylechange"
                        >
                          <el-option
                            v-for="item in composingstyleList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                      <!-- 文字一 -->
                      <div class="display" style="padding-top:20px;">
                        <span
                          style="dispaly:inline-block;width:70px;font-size:14px"
                          >文字一</span
                        >
                        <el-input
                          style="width:220px"
                          v-model="title1"
                          placeholder="请输入内容"
                        ></el-input>
                        <el-select v-model="title_size1" style="width:70px">
                          <el-option
                            v-for="item in sizeList2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                        <el-color-picker
                          v-model="title_color1"
                          :predefine="predefineColors"
                        ></el-color-picker>
                      </div>
                      <!-- 文字二 -->
                      <div class="display" style="padding-top:20px;">
                        <span
                          style="dispaly:inline-block;width:70px;font-size:14px"
                          >文字二</span
                        >
                        <el-input
                          style="width:220px"
                          v-model="title2"
                          placeholder="请输入内容"
                        ></el-input>
                        <el-select v-model="title_size2" style="width:70px">
                          <el-option
                            v-for="item in sizeList2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                        <el-color-picker
                          v-model="title_color2"
                          :predefine="predefineColors"
                        ></el-color-picker>
                      </div>
                      <!-- 文字三-六 -->
                      <div v-if="miaoList.length > 0">
                        <div
                          class="miao00"
                          v-for="(item, index) in miaoList[miaoradio].font"
                          :key="index"
                        >
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text1 }}</span
                            >
                            <el-input
                              style="width:220px"
                              v-model="item.title1"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select
                              v-model="item.title_size1"
                              style="width:70px"
                            >
                              <el-option
                                v-for="ite in sizeList"
                                :key="ite.value"
                                :label="ite.label"
                                :value="ite.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="item.title_color1"
                              :predefine="predefineColors"
                            ></el-color-picker>
                          </div>
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text2 }}</span
                            >
                            <el-input
                              style="width:220px"
                              v-model="item.title2"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select
                              v-model="item.title_size2"
                              style="width:70px"
                            >
                              <el-option
                                v-for="ite in sizeList"
                                :key="ite.value"
                                :label="ite.label"
                                :value="ite.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="item.title_color2"
                              :predefine="predefineColors"
                            ></el-color-picker>
                          </div>
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text3 }}</span
                            >
                            <el-input
                              style="width:220px"
                              v-model="item.title3"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select
                              v-model="item.title_size3"
                              style="width:70px"
                            >
                              <el-option
                                v-for="ite in sizeList"
                                :key="ite.value"
                                :label="ite.label"
                                :value="ite.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="item.title_color3"
                              :predefine="predefineColors"
                            ></el-color-picker>
                          </div>
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text4 }}</span
                            >
                            <el-input
                              style="width:220px"
                              v-model="item.title4"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select
                              v-model="item.title_size4"
                              style="width:70px"
                            >
                              <el-option
                                v-for="ite in sizeList"
                                :key="ite.value"
                                :label="ite.label"
                                :value="ite.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="item.title_color4"
                              :predefine="predefineColors"
                            ></el-color-picker>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="main_btn">
                    <div style="margin:20px 0;width:100%;margin-right:20px">
                      <!-- 导出按钮 -->
                      <div style="display: none;">
                        <input
                          type="file"
                          name="upload"
                          id="upload"
                          style="display: none;"
                        />
                      </div>
                      <el-button
                        type="primary"
                        size="small"
                        @click="saveAsImg('miaocanvas')"
                        >合 成</el-button
                      >
                      <el-button
                        type="primary"
                        size="small"
                        @mousedown.native="handleOk2('miaoimg')"
                        @click="handleOk('miaoimg')"
                        >复制</el-button
                      >
                      <a
                        download="营销图"
                        :href="saveurl"
                        style="width:100%;height:100%;margin-left:10px"
                      >
                        <el-button type="primary" size="small">
                          保存
                        </el-button>
                      </a>
                    </div>
                    <div>
                      <!-- style="width: 150px; height: 300px" -->
                      <el-image
                        id="miaoimg"
                        v-if="dourl !== ''"
                        :src="dourl"
                        fit="cover"
                      ></el-image>
                    </div>
                  </div>
                </div>
                <div v-show="leftshow == 3">
                  <div>
                    <div class="set_box">
                      <!-- 主题风格 -->
                      <div class="display" style="padding-top:20px;">
                        <span
                          style="dispaly:inline-block;width:70px;font-size:14px"
                          >主题风格</span
                        >
                        <el-select
                          v-model="baostyle"
                          placeholder="请选择主题风格"
                          @change="baostylechange"
                        >
                          <el-option
                            v-for="item in baostyleList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                      </div>
                      <!-- 文字一 -->
                      <div class="display" style="padding-top:20px;">
                        <span
                          style="dispaly:inline-block;width:70px;font-size:14px"
                          >文字一</span
                        >
                        <el-input
                          style="width:220px"
                          v-model="title1"
                          placeholder="请输入内容"
                        ></el-input>
                        <el-select v-model="title_size1" style="width:70px">
                          <el-option
                            v-for="item in sizeList2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                        <el-color-picker
                          v-model="title_color1"
                          :predefine="predefineColors"
                        ></el-color-picker>
                      </div>
                      <!-- 文字二 -->
                      <div class="display" style="padding-top:20px;">
                        <span
                          style="dispaly:inline-block;width:70px;font-size:14px"
                          >文字二</span
                        >
                        <el-input
                          style="width:220px"
                          v-model="title2"
                          placeholder="请输入内容"
                        ></el-input>
                        <el-select v-model="title_size2" style="width:70px">
                          <el-option
                            v-for="item in sizeList2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select>
                        <el-color-picker
                          v-model="title_color2"
                          :predefine="predefineColors"
                        ></el-color-picker>
                      </div>
                      <!-- 文字三-六 -->
                      <div v-if="baoList.length > 0">
                        <div
                          class="miao00"
                          v-for="(item, index) in baoList[baoradio].font"
                          :key="index"
                        >
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text1 }}</span
                            >
                            <el-input
                              style="width:220px"
                              v-model="item.title1"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select
                              v-model="item.title_size1"
                              style="width:70px"
                            >
                              <el-option
                                v-for="ite in sizeList"
                                :key="ite.value"
                                :label="ite.label"
                                :value="ite.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="item.title_color1"
                              :predefine="predefineColors"
                            ></el-color-picker>
                          </div>
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text2 }}</span
                            >
                            <el-input
                              style="width:220px"
                              v-model="item.title2"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select
                              v-model="item.title_size2"
                              style="width:70px"
                            >
                              <el-option
                                v-for="ite in sizeList"
                                :key="ite.value"
                                :label="ite.label"
                                :value="ite.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="item.title_color2"
                              :predefine="predefineColors"
                            ></el-color-picker>
                          </div>
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text3 }}</span
                            >
                            <el-input
                              style="width:220px"
                              v-model="item.title3"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select
                              v-model="item.title_size3"
                              style="width:70px"
                            >
                              <el-option
                                v-for="ite in sizeList"
                                :key="ite.value"
                                :label="ite.label"
                                :value="ite.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="item.title_color3"
                              :predefine="predefineColors"
                            ></el-color-picker>
                          </div>
                          <div class="display" style="padding-top:20px;">
                            <span
                              style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text4 }}</span
                            >
                            <el-input
                              style="width:220px"
                              v-model="item.title4"
                              placeholder="请输入内容"
                            ></el-input>
                            <el-select
                              v-model="item.title_size4"
                              style="width:70px"
                            >
                              <el-option
                                v-for="ite in sizeList"
                                :key="ite.value"
                                :label="ite.label"
                                :value="ite.value"
                              >
                              </el-option>
                            </el-select>
                            <el-color-picker
                              v-model="item.title_color4"
                              :predefine="predefineColors"
                            ></el-color-picker>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="main_btn">
                    <div style="margin:20px 0;width:100%;margin-right:20px">
                      <!-- 导出按钮 -->
                      <el-button
                        type="primary"
                        size="small"
                        @click="saveAsImg('baocanvas')"
                        >合 成</el-button
                      >
                      <el-button
                        type="primary"
                        size="small"
                        @mousedown.native="handleOk2('baoimg')"
                        @click="handleOk('baoimg')"
                        >复制</el-button
                      >
                      <a
                        download="营销图"
                        :href="saveurl"
                        style="width:100%;height:100%;margin-left:10px"
                      >
                        <el-button type="primary" size="small">
                          保存
                        </el-button>
                      </a>
                    </div>
                    <div>
                      <!-- style="width: 150px; height: 300px" -->
                      <el-image
                        id="baoimg"
                        v-if="dourl !== ''"
                        :src="dourl"
                        fit="cover"
                      ></el-image>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col
          :span="7"
          style="padding-left:0px;padding-right:0px;height:100%"
        >
          <!-- 右侧获取图片 -->
          <el-card :body-style="{ padding: '0px' }">
            <div class="main_box" :style="{ height: cardheight + 'px' }">
              <div class="main_box3">
                <div class="display2" style="margin-top:20px;">
                  <el-input
                    placeholder="请输入商品链接获取图片"
                    v-model="goodsurl"
                    clearable
                  >
                  </el-input>
                  <el-button type="primary" @click="dosearch">获取</el-button>
                </div>
                <div style="margin:10px 0">
                  <div class="display2">
                    <div class="display" style="padding:8px 0;">
                      <span class="leftline"></span>
                      <span class="lefttitle">淘宝主图</span>
                    </div>
                    <div class="rightinfo">
                      请拖拽到左边需要合成的盒子里
                    </div>
                  </div>
                  <div class="mainimg_box" v-if="mainimgList.length > 0">
                    <div
                      class="tbmainimg"
                      v-for="(item, index) in mainimgList"
                      :key="index"
                    >
                      <el-image
                        @mousedown="isdown = true"
                        @mouseup="isdown = false"
                        @mouseleave="leaveimg"
                        style="width: 100px; height: 100px"
                        :src="item"
                        fit="cover"
                        :preview-src-list="mainimgList"
                      ></el-image>
                    </div>
                  </div>
                  <div v-else class="mainimg_box">
                    <span v-for="i in 3" :key="i" class="mian_span"></span>
                  </div>
                </div>
                <div style="margin:10px 0">
                  <div class="display2">
                    <div class="display" style="padding:8px 0;">
                      <span class="leftline"></span>
                      <span class="lefttitle">营销图</span>
                    </div>
                    <!-- <div class="rightinfo">
                      请拖拽到左边需要合成的盒子里
                    </div> -->
                  </div>
                  <div class="mainimg_box" v-if="yximgList.length > 0">
                    <div
                      class="tbmainimg"
                      v-for="(item, index) in yximgList"
                      :key="index"
                    >
                      <el-image
                        @mousedown="isdown = true"
                        @mouseup="isdown = false"
                        @mouseleave="leaveimg"
                        style="width: 100px; height: 100px"
                        :src="item"
                        fit="cover"
                        :preview-src-list="yximgList"
                      ></el-image>
                    </div>
                  </div>
                  <div v-else class="mainimg_box">
                    <span v-for="i in 3" :key="i" class="mian_span"></span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { doBaseUpload } from "@/api/user/user.js"; //base64上传
import html2canvas from "html2canvas";
export default {
  name: "widgepic",
  data() {
    return {
      baoboxheight: 1030,
      miaoboxheight: 680,
      // 全局上传地址
      uploadaction: "http://gyapi.letuilm.com/upload",
      // 右边主图拖动条件
      isdown: false,
      flag: false,
      // 右侧图地址暂存
      moveimg: "",
      // 右侧营销图列表
      yximgList: [
        // "http://img.letuilm.com/2020/06/1d9b042020061717382128336.jpeg",
      ],
      // 右侧主图列表
      mainimgList: [],
      saveurl: "",
      goodsurl: "",
      dourl: "",
      // 三大卡片高度
      cardheight: 680,
      // 爆品汇总固定图片
      baoicon: require("@/assets/images/baotop.png"),
      baourlblue: require("@/assets/images/baoblue.png"),
      baourlorange: require("@/assets/images/baoorange.png"),
      baourlred: require("@/assets/images/baored.png"),
      baourlpurple: require("@/assets/images/baopurple.png"),
      // 爆款渲染列表
      baoList: [
        {
          font: [
            {
              text1: "文字三",
              title1: "[三只松鼠]",
              title_color1: "#ffffff",
              title_size1: "16",

              text2: "文字四",
              title2: "零食大礼包",
              title_color2: "#ffffff",
              title_size2: "16",

              text3: "文字五",
              title3: "6666",
              title_color3: "#ffffff",
              title_size3: "32",

              text4: "文字六",
              title4: "3.20",
              title_color4: "#ffffff",
              title_size4: "16"
            }
          ],
          imgurl: "",
          status: 1
        },
        {
          font: [
            {
              text1: "文字三",
              title1: "[三只松鼠]",
              title_color1: "#ffffff",
              title_size1: "16",

              text2: "文字四",
              title2: "零食大礼包",
              title_color2: "#ffffff",
              title_size2: "16",

              text3: "文字五",
              title3: "6666",
              title_color3: "#ffffff",
              title_size3: "32",

              text4: "文字六",
              title4: "3.20",
              title_color4: "#ffffff",
              title_size4: "16"
            }
          ],
          imgurl: "",
          status: 2
        },
        {
          font: [
            {
              text1: "文字三",
              title1: "[三只松鼠]",
              title_color1: "#ffffff",
              title_size1: "16",

              text2: "文字四",
              title2: "零食大礼包",
              title_color2: "#ffffff",
              title_size2: "16",

              text3: "文字五",
              title3: "6666",
              title_color3: "#ffffff",
              title_size3: "32",

              text4: "文字六",
              title4: "3.20",
              title_color4: "#ffffff",
              title_size4: "16"
            }
          ],
          imgurl: "",
          status: 3
        },
        {
          font: [
            {
              text1: "文字三",
              title1: "[三只松鼠]",
              title_color1: "#ffffff",
              title_size1: "16",

              text2: "文字四",
              title2: "零食大礼包",
              title_color2: "#ffffff",
              title_size2: "16",

              text3: "文字五",
              title3: "6666",
              title_color3: "#ffffff",
              title_size3: "32",

              text4: "文字六",
              title4: "3.20",
              title_color4: "#ffffff",
              title_size4: "16"
            }
          ],
          imgurl: "",
          status: 4
        }
      ],
      baoradio: 0, //爆款列表单选
      // 爆款风格
      baostyle: 1,
      baostyleList: [
        {
          value: 1,
          label: "缤纷_单列1"
        },
        {
          value: 2,
          label: "缤纷_单列2"
        },
        {
          value: 3,
          label: "缤纷_单列3"
        }
      ],
      // 秒杀预告固定图片
      iconurlblue: require("@/assets/images/baoicon_blue.png"),
      iconurlorange: require("@/assets/images/baoicon_orange.png"),
      bgurlblue: require("@/assets/images/listbg_blue.png"),
      bgurlorange: require("@/assets/images/listbg_orange.png"),
      miaoradio: 0, //秒杀列表单选
      // 秒杀渲染列表
      miaoList: [
        {
          font: [
            {
              text1: "文字三",
              title1: "三只松鼠",
              title_color1: "#ffffff",
              title_size1: "18",

              text2: "文字四",
              title2: "50.0",
              title_color2: "#ffffff",
              title_size2: "16",

              text3: "文字五",
              title3: "10.0",
              title_color3: "#ffffff",
              title_size3: "16",

              text4: "文字六",
              title4: "3月14号 上午10:00",
              title_color4: "#ffffff",
              title_size4: "16"
            }
          ],
          imgurl: "",
          isblue: true
        },
        {
          font: [
            {
              text1: "文字三",
              title1: "三只松鼠",
              title_color1: "#ffffff",
              title_size1: "18",

              text2: "文字四",
              title2: "50.0",
              title_color2: "#ffffff",
              title_size2: "16",

              text3: "文字五",
              title3: "10.0",
              title_color3: "#ffffff",
              title_size3: "16",

              text4: "文字六",
              title4: "3月14号 上午10:00",
              title_color4: "#ffffff",
              title_size4: "16"
            }
          ],
          imgurl: "",
          isblue: false
        }
      ],
      // 秒杀预告轮播图
      miaoimglist: [
        { url: require("@/assets/images/baobgblue.png") },
        { url: require("@/assets/images/baobgorange.png") },
        { url: require("@/assets/images/baobgred.png") }
      ],
      // 边框颜色
      bordercolor: "#FF0000",
      // 小标签
      smallLabel: 1,
      // iconfont颜色
      icfontcolor: "#FF0000",
      // 定位盒子top
      potop: "53.5%",
      poleft: "0px",
      // 文字6
      title6: "3月14号 上午10:00",
      title_color6: "#ffffff",
      title_size6: "16",
      // 文字5
      title5: "10.0",
      title_color5: "#ffffff",
      title_size5: "16",
      // 文字4
      title4: "三只松鼠",
      title_color4: "#ffffff",
      title_size4: "14",
      title_famiy4: "微软雅黑",
      // 文字3
      title3: "29.9",
      title_color3: "#FF0000",
      title_size3: "20",
      title_famiy3: "微软雅黑",
      title_border3: "1px solid red",
      // 文字2
      title2: "劵后价",
      title_color2: "#FF0000",
      title_size2: "14",
      title_famiy2: "微软雅黑",
      // 文字1
      title1: "下单立减20元",
      title_color1: "#ffffff",
      title_size1: "20",
      title_famiy1: "微软雅黑",
      //营销推广图背景
      graphBgImg: require("@/assets/images/long_red.png"),

      graphradio: 1, //中间标签切换展示控制
      leftshow: 1, //中间分类展示控制
      uploadradio: 1, //左边上传布局控制
      // 上传图片地址
      imgone: "",
      imgtwo: "",
      imgthree: "",
      imgfour: "",
      imgfive: "", //自定义上传
      // 标签样式列表
      graphList: [
        {
          id: 1,
          name: "长条标签"
        },
        {
          id: 2,
          name: "圆标签"
        },
        {
          id: 3,
          name: "小标签"
        },
        {
          id: 4,
          name: "实拍图标签"
        },
        {
          id: 5,
          name: "聚划算"
        },
        {
          id: 6,
          name: "淘抢购"
        },
        {
          id: 7,
          name: "品牌标签"
        },
        {
          id: 8,
          name: "自定义上传"
        }
      ],
      styleradio: 1,
      // 风格下拉框
      styleList: [
        {
          value: 1,
          label: "红色风格"
        },
        {
          value: 2,
          label: "紫色风格"
        },
        {
          value: 3,
          label: "橙色风格"
        },
        {
          value: 4,
          label: "绿色风格"
        },
        {
          value: 5,
          label: "蓝色风格"
        }
      ],
      // 字体大小下拉框 12-32
      sizeList: [
        {
          value: "12",
          label: "12"
        },
        {
          value: "14",
          label: "14"
        },
        {
          value: "16",
          label: "16"
        },
        {
          value: "18",
          label: "18"
        },
        {
          value: "20",
          label: "20"
        },
        {
          value: "22",
          label: "22"
        },
        {
          value: "24",
          label: "24"
        },
        {
          value: "26",
          label: "26"
        },
        {
          value: "28",
          label: "28"
        },
        {
          value: "30",
          label: "30"
        },
        {
          value: "32",
          label: "32"
        }
      ],
      // 字体大小下拉框16-48
      sizeList2: [
        {
          value: "16",
          label: "16"
        },
        {
          value: "18",
          label: "18"
        },
        {
          value: "20",
          label: "20"
        },
        {
          value: "22",
          label: "22"
        },
        {
          value: "24",
          label: "24"
        },
        {
          value: "26",
          label: "26"
        },
        {
          value: "28",
          label: "28"
        },
        {
          value: "30",
          label: "30"
        },
        {
          value: "32",
          label: "32"
        },
        {
          value: "34",
          label: "34"
        },
        {
          value: "36",
          label: "36"
        },
        {
          value: "38",
          label: "38"
        },
        {
          value: "40",
          label: "40"
        },
        {
          value: "42",
          label: "42"
        },
        {
          value: "44",
          label: "44"
        },
        {
          value: "46",
          label: "46"
        },
        {
          value: "48",
          label: "48"
        }
      ],
      // 字体选择
      famiyList: [
        {
          value: "宋体",
          label: "宋体"
        },
        {
          value: "Arial",
          label: "Arial"
        },
        {
          value: "黑体",
          label: "黑体"
        },
        {
          value: "微软雅黑",
          label: "微软雅黑"
        },
        {
          value: "微软正黑体",
          label: "微软正黑体"
        },
        {
          value: "楷体",
          label: "楷体"
        },
        {
          value: "新宋体",
          label: "新宋体"
        },
        {
          value: "仿宋",
          label: "仿宋"
        },
        {
          value: "Times New Roman",
          label: "Times New Roman"
        },
        {
          value: "Helvetica",
          label: "Helvetica"
        },
        {
          value: "Verdana",
          label: "Verdana"
        },
        {
          value: "Tahoma",
          label: "Tahoma"
        }
      ],
      // 预设颜色
      predefineColors: [
        "#FFFFFF",
        "#FF4500",
        "#FF8C00",
        "#FFD700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "#FF7800"
      ],
      // 主题风格
      stylechooseList: [
        {
          value: 1,
          label: "缤纷_单列"
        },
        {
          value: 2,
          label: "蓝色_单列"
        },
        {
          value: 3,
          label: "橙黄色_单列"
        }
      ],
      stylechoose: 1,
      // 排版风格
      composingstyleList: [
        {
          value: 1,
          label: "单行标题"
        },
        {
          value: 2,
          label: "多行标题"
        }
      ],
      composingstyle: 1
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 右侧商品链接获取主图
    dosearch() {
      console.log(this.goodsurl);
      var itemid = "";
      var reg = /id=(\d+)/i;
      this.goodsurl.match(reg);
      const idArr = this.goodsurl.match(reg);
      console.log("商品id", idArr[1]);
      itemid = idArr[1];
      axios
        .get(
          "http://api-test.shihuizhu.com/tool/goodsImg?url=https:%2F%2Fdetail.tmall.com%2Fitem.htm%3Fid%3D" +
            itemid +
            "&itemid=" +
            itemid,
          {
            // 还可以直接把参数拼接在url后边
            // params: {
            //   title: "眼镜"
            // }
          }
        )
        .then(res => {
          console.log("获取主图返回", res.data.data);
          this.mainimgList = [];
          this.yximgList = [];
          var main_Img = res.data.data.main_Img; //淘宝主图
          var market_Img = res.data.data.market_Img; //营销图
          if (main_Img.length > 0) {
            for (let i = 0; i < main_Img.length; i++) {
              this.mainimgList.push(main_Img[i].ImgUrl);
            }
          }
          if (market_Img.length > 0) {
            for (let i = 0; i < market_Img.length; i++) {
              this.yximgList.push(market_Img[i].ImgUrl);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 右侧拖动图片离开盒子
    leaveimg(e) {
      if (this.isdown == true) {
        this.flag = false;
        // console.log("down", e.target.currentSrc);
        this.moveimg = e.target.currentSrc;
      }
    },
    // 进入目标盒子
    enterdiv(val, index) {
      // console.log(val);
      if (this.flag == false) {
        if (val == "imgone") {
          this.imgone = this.moveimg;
        } else if (val == "imgtwo") {
          this.imgtwo = this.moveimg;
        } else if (val == "imgthree") {
          this.imgthree = this.moveimg;
        } else if (val == "imgfour") {
          this.imgfour = this.moveimg;
        } else if (val == 6) {
          for (let i = 0; i < this.miaoList.length; i++) {
            if (i == index) {
              this.miaoList[i].imgurl = this.moveimg;
            }
          }
        } else if (val == 7) {
          for (let i = 0; i < this.baoList.length; i++) {
            if (i == index) {
              this.baoList[i].imgurl = this.moveimg;
            }
          }
        }
        this.moveimg = "";
        this.flag = true;
        this.isdown = false;
      }
    },
    // 预复制
    handleOk2(val) {
      // this.$nextTick(function() {
      const selection = window.getSelection();
      const range = document.createRange();
      // console.log(document.getElementById(val));
      range.selectNode(document.getElementById(val)); //传入dom
      selection.addRange(range);
      document.execCommand("copy");
      selection.removeAllRanges();
      // });
    },
    // 复制
    handleOk(val) {
      console.log(val);
      if (this.dourl == "") {
        this.$message.info("请先合成图片再复制!");
      } else {
        this.$nextTick(function() {
          const selection = window.getSelection();
          const range = document.createRange();
          console.log(document.getElementById(val));
          range.selectNode(document.getElementById(val)); //传入dom
          selection.addRange(range);
          document.execCommand("copy");
          this.$message.success("复制成功");
          selection.removeAllRanges();
        });
      }
    },
    // 爆品汇总删除最后一个
    colsebaolist() {
      this.baoList.pop();
      this.baoradio = 0;
      // console.log("this.baoList", this.baoList);
      var canvas_box3 = document.querySelector(".canvas_box3");
      if (this.cardheight > 660) {
        this.cardheight = canvas_box3.offsetHeight - 190;
        console.log(this.cardheight);
      }
      if (this.cardheight < 630) {
        this.cardheight = 650;
        console.log(this.cardheight);
      }
      this.baoboxheight = this.cardheight;
    },
    // 秒杀预告删除
    colsemiaolist() {
      this.miaoList.pop();
      this.miaoradio = 0;
      // console.log("close_miaoList", this.miaoList);
      var canvas_box2 = document.querySelector(".canvas_box2");
      if (this.cardheight > 615) {
        this.cardheight = canvas_box2.offsetHeight - 190;
        console.log(this.cardheight);
      }
      if (this.cardheight <= 615) {
        this.cardheight = 615;
        console.log(this.cardheight);
      }
      this.miaoboxheight = this.cardheight;
    },
    // 关闭图片的显示
    closeimg(val, index) {
      window.event.preventDefault();
      if (val == 1) {
        this.imgone = "";
      }
      if (val == 2) {
        this.imgtwo = "";
      }
      if (val == 3) {
        this.imgthree = "";
      }
      if (val == 4) {
        this.imgfour = "";
      }
      if (val == 5) {
        this.imgfive = "";
      }
      if (val == 6) {
        for (let i = 0; i < this.miaoList.length; i++) {
          if (i == index) {
            this.miaoList[i].imgurl = "";
          }
        }
      }
      if (val == 7) {
        for (let i = 0; i < this.baoList.length; i++) {
          if (i == index) {
            this.baoList[i].imgurl = "";
          }
        }
      }
    },
    // 营销推广图标签的显示
    showtabsdiv() {
      this.$refs.showtabs.style.display = "block";
    },
    // 营销推广图标签的隐藏
    closediv() {
      this.$refs.showtabs.style.display = "none";
    },
    // 爆品汇总左侧列表切换
    baoradiochange(val) {
      console.log("baoradio", val);
    },
    // 秒杀左侧列表切换
    miaoradiochange(val) {
      console.log("miaoradio", val);
    },
    // 爆款汇总增加
    addbaolist() {
      var status1 = {
        font: [
          {
            text1: "文字三",
            title1: "[三只松鼠]",
            title_color1: "#ffffff",
            title_size1: "16",

            text2: "文字四",
            title2: "零食大礼包",
            title_color2: "#ffffff",
            title_size2: "16",

            text3: "文字五",
            title3: "6666",
            title_color3: "#ffffff",
            title_size3: "32",

            text4: "文字六",
            title4: "3.20",
            title_color4: "#ffffff",
            title_size4: "16"
          }
        ],
        imgurl: "",
        status: 1
      };
      var status2 = {
        font: [
          {
            text1: "文字三",
            title1: "[三只松鼠]",
            title_color1: "#ffffff",
            title_size1: "16",

            text2: "文字四",
            title2: "零食大礼包",
            title_color2: "#ffffff",
            title_size2: "16",

            text3: "文字五",
            title3: "6666",
            title_color3: "#ffffff",
            title_size3: "32",

            text4: "文字六",
            title4: "3.20",
            title_color4: "#ffffff",
            title_size4: "16"
          }
        ],
        imgurl: "",
        status: 2
      };
      var status3 = {
        font: [
          {
            text1: "文字三",
            title1: "[三只松鼠]",
            title_color1: "#ffffff",
            title_size1: "16",

            text2: "文字四",
            title2: "零食大礼包",
            title_color2: "#ffffff",
            title_size2: "16",

            text3: "文字五",
            title3: "6666",
            title_color3: "#ffffff",
            title_size3: "32",

            text4: "文字六",
            title4: "3.20",
            title_color4: "#ffffff",
            title_size4: "16"
          }
        ],
        imgurl: "",
        status: 3
      };
      var status4 = {
        font: [
          {
            text1: "文字三",
            title1: "[三只松鼠]",
            title_color1: "#ffffff",
            title_size1: "16",

            text2: "文字四",
            title2: "零食大礼包",
            title_color2: "#ffffff",
            title_size2: "16",

            text3: "文字五",
            title3: "6666",
            title_color3: "#ffffff",
            title_size3: "32",

            text4: "文字六",
            title4: "3.20",
            title_color4: "#ffffff",
            title_size4: "16"
          }
        ],
        imgurl: "",
        status: 4
      };
      if (this.baostyle == 1) {
        if (this.baoList.length % 4 == 0) {
          this.baoList.push(status1);
        } else if (this.baoList.length % 4 == 1) {
          this.baoList.push(status2);
        } else if (this.baoList.length % 4 == 2) {
          this.baoList.push(status3);
        } else if (this.baoList.length % 4 == 3) {
          this.baoList.push(status4);
        }
      }
      if (this.baostyle == 2) {
        if (this.baoList.length % 2 == 0) {
          this.baoList.push(status1);
        } else {
          this.baoList.push(status3);
        }
      }
      if (this.baostyle == 3) {
        if (this.baoList.length % 2 == 0) {
          this.baoList.push(status2);
        } else {
          this.baoList.push(status4);
        }
      }
      var canvas_box3 = document.querySelector(".canvas_box3");
      // console.log("1+", this.cardheight);
      if (this.cardheight < 1224) {
        if (canvas_box3.offsetHeight < 619) {
          this.cardheight = 640;
        } else {
          this.cardheight = canvas_box3.offsetHeight + 210;
        }
        console.log("2+", this.cardheight);
      }
      this.baoboxheight = this.cardheight;
    },
    // 秒杀预告增加
    doaddlist() {
      var obj1 = {
        font: [
          {
            text1: "文字三",
            title1: "三只松鼠",
            title_color1: "#ffffff",
            title_size1: "18",

            text2: "文字四",
            title2: "50.0",
            title_color2: "#ffffff",
            title_size2: "16",

            text3: "文字五",
            title3: "10.0",
            title_color3: "#ffffff",
            title_size3: "16",

            text4: "文字六",
            title4: "3月14号 上午10:00",
            title_color4: "#ffffff",
            title_size4: "16"
          }
        ],
        imgurl: "",
        isblue: true
      };
      var obj2 = {
        font: [
          {
            text1: "文字三",
            title1: "三只松鼠",
            title_color1: "#ffffff",
            title_size1: "18",

            text2: "文字四",
            title2: "50.0",
            title_color2: "#ffffff",
            title_size2: "16",

            text3: "文字五",
            title3: "10.0",
            title_color3: "#ffffff",
            title_size3: "16",

            text4: "文字六",
            title4: "3月14号 上午10:00",
            title_color4: "#ffffff",
            title_size4: "16"
          }
        ],
        imgurl: "",
        isblue: false
      };
      if (this.stylechoose == 1) {
        if (this.miaoList.length % 2 == 0) {
          this.miaoList.push(obj1);
        } else {
          this.miaoList.push(obj2);
        }
      }
      if (this.stylechoose == 2) {
        this.miaoList.push(obj1);
      }
      if (this.stylechoose == 3) {
        this.miaoList.push(obj2);
      }
      // console.log("this.miaoList", this.miaoList);
      var canvas_box2 = document.querySelector(".canvas_box2");
      if (this.cardheight < 1224) {
        if (canvas_box2.offsetHeight < 615) {
          this.cardheight = 625;
        } else {
          this.cardheight = canvas_box2.offsetHeight + 210;
          console.log(this.cardheight);
        }
      }
      this.miaoboxheight = this.cardheight;
    },
    // 爆款主题风格切换
    baostylechange(val) {
      console.log("baostyle", val);
      if (val == 1) {
        for (let i = 0; i < this.baoList.length; i++) {
          if (i % 4 == 0) {
            this.baoList[i].status = 1;
          } else if (i % 4 == 1) {
            this.baoList[i].status = 2;
          } else if (i % 4 == 2) {
            this.baoList[i].status = 3;
          } else if (i % 4 == 3) {
            this.baoList[i].status = 4;
          }
        }
      }
      if (val == 2) {
        for (let i = 0; i < this.baoList.length; i++) {
          if (i % 2 == 0) {
            this.baoList[i].status = 1;
          } else {
            this.baoList[i].status = 3;
          }
        }
      }
      if (val == 3) {
        for (let i = 0; i < this.baoList.length; i++) {
          if (i % 2 == 0) {
            this.baoList[i].status = 2;
          } else {
            this.baoList[i].status = 4;
          }
        }
      }
    },
    // 秒杀主题风格切换
    stylechoosechange(val) {
      console.log("stylechoose", val);
      if (val == 1) {
        for (let i = 0; i < this.miaoList.length; i++) {
          if (i % 2 == 0) {
            this.miaoList[i].isblue = true;
          } else {
            this.miaoList[i].isblue = false;
          }
        }
      }
      if (val == 2) {
        for (let i = 0; i < this.miaoList.length; i++) {
          this.miaoList[i].isblue = true;
        }
      }
      if (val == 3) {
        for (let i = 0; i < this.miaoList.length; i++) {
          this.miaoList[i].isblue = false;
        }
      }
    },
    // 排版风格切换
    composingstylechange(val) {
      console.log("composingstyle", val);
      if (val == 1) {
        for (let i = 0; i < this.miaoList.length; i++) {
          this.miaoList[i].font[0].title_size2 = "16";
        }
      }
      if (val == 2) {
        for (let i = 0; i < this.miaoList.length; i++) {
          this.miaoList[i].font[0].title_size2 = "14";
        }
      }
    },
    // 风格切换事件
    stylechange(val) {
      console.log("风格切换-styleradio", val);
      if (val == 1) {
        if (this.graphradio == 1) {
          this.graphBgImg = require("@/assets/images/long_red.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#FF0000";
          this.title_color3 = "#FF0000";
          this.title_border3 = "1px solid #FF0000";
        }
        if (this.graphradio == 2) {
          this.graphBgImg = require("@/assets/images/round_red.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 5) {
          this.graphBgImg = require("@/assets/images/ju_red.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 6) {
          this.graphBgImg = require("@/assets/images/tao_red.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 7) {
          this.graphBgImg = require("@/assets/images/none_red.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_color4 = "#ffffff";
          this.title_border3 = "none";
        }
      }
      if (val == 2) {
        if (this.graphradio == 1) {
          this.graphBgImg = require("@/assets/images/long_purple.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#800080";
          this.title_color3 = "#800080";
          this.title_border3 = "1px solid #800080";
        }
        if (this.graphradio == 2) {
          this.graphBgImg = require("@/assets/images/round_purple.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 5) {
          this.graphBgImg = require("@/assets/images/ju_purple.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
        }
        if (this.graphradio == 6) {
          this.graphBgImg = require("@/assets/images/tao_purple.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
        }
        if (this.graphradio == 7) {
          this.graphBgImg = require("@/assets/images/none_purple.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_color4 = "#ffffff";
        }
      }
      if (val == 3) {
        if (this.graphradio == 1) {
          this.graphBgImg = require("@/assets/images/long_orange.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#FFA500";
          this.title_color3 = "#FFA500";
          this.title_border3 = "1px solid #FFA500";
        }
        if (this.graphradio == 2) {
          this.graphBgImg = require("@/assets/images/round_orange.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 5) {
          this.graphBgImg = require("@/assets/images/ju_orange.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 6) {
          this.graphBgImg = require("@/assets/images/tao_orange.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 7) {
          this.graphBgImg = require("@/assets/images/none_orange.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_color4 = "#ffffff";
          this.title_border3 = "none";
        }
      }
      if (val == 4) {
        if (this.graphradio == 1) {
          this.graphBgImg = require("@/assets/images/long_green.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#008000";
          this.title_color3 = "#008000";
          this.title_border3 = "1px solid #008000";
        }
        if (this.graphradio == 2) {
          this.graphBgImg = require("@/assets/images/round_green.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 5) {
          this.graphBgImg = require("@/assets/images/ju_green.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 6) {
          this.graphBgImg = require("@/assets/images/tao_green.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 7) {
          this.graphBgImg = require("@/assets/images/none_green.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_color4 = "#ffffff";
          this.title_border3 = "none";
        }
      }
      if (val == 5) {
        if (this.graphradio == 1) {
          this.graphBgImg = require("@/assets/images/long_blue.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#0000FF";
          this.title_color3 = "#0000FF";
          this.title_border3 = "1px solid #0000FF";
        }
        if (this.graphradio == 2) {
          this.graphBgImg = require("@/assets/images/round_blue.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 5) {
          this.graphBgImg = require("@/assets/images/ju_blue.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 6) {
          this.graphBgImg = require("@/assets/images/tao_blue.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_border3 = "none";
        }
        if (this.graphradio == 7) {
          this.graphBgImg = require("@/assets/images/none_blue.png");
          this.title_color1 = "#ffffff";
          this.title_color2 = "#ffffff";
          this.title_color3 = "#ffffff";
          this.title_color4 = "#ffffff";
          this.title_border3 = "none";
        }
      }
    },
    // 移动盒子事件按下
    movedown(e) {
      console.log("按下", e);
      var father = this.$refs.mycanvas;
      var son = this.$refs.showtabs;
      var changetop = father.offsetHeight - son.offsetHeight;
      var changeleft = father.offsetWidth - son.offsetWidth;
      console.log(this.$refs);
      let showtabs = this.$refs.showtabs; //获取目标元素
      // console.log("pageY", this.father.pageY);
      // console.log("pageX", this.father.pageX);
      //算出鼠标相对元素的位置
      let disX = e.clientX - showtabs.offsetLeft;
      let disY = e.clientY - showtabs.offsetTop;
      document.onmousemove = e => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        console.log("top", top);
        // console.log("left", left);
        if (top >= 0 && top <= changetop) {
          showtabs.style.top = top + "px";
        }
        if (left >= 0 && left <= changeleft) {
          showtabs.style.left = left + "px";
        }
        //绑定元素位置到positionX和positionY上面
        // this.positionX = top;
        // this.positionY = left;

        //移动当前元素
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    // 抬起
    moveup(e) {
      console.log("抬起", e);
    },
    // 标签切换控制
    graphchange(val) {
      console.log("标签切换-graphradio", val);
      this.$refs.showtabs.style.display = "block";
      this.styleradio = 1;
      this.imgfive = "";
      let showtabs = this.$refs.showtabs; //获取目标元素
      if (val == 1) {
        this.graphBgImg = require("@/assets/images/long_red.png");
        // 文字3
        this.title3 = "29.9";
        this.title_color3 = "#FF0000";
        this.title_size3 = "20";
        this.title_famiy3 = "微软雅黑";
        this.title_border3 = "1px solid red";
        // 文字2
        this.title2 = "劵后价";
        this.title_color2 = "#FF0000";
        this.title_size2 = "14";
        this.title_famiy2 = "微软雅黑";
        // 文字1
        this.title1 = "下单立减20元";
        this.title_color1 = "#ffffff";
        this.title_size1 = "20";
        this.title_famiy1 = "微软雅黑";
        if (this.uploadradio == 1) {
          showtabs.style.top = "53.5%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 2) {
          showtabs.style.top = "34%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 3) {
          showtabs.style.top = "41.5%";
          showtabs.style.left = "33%";
        }
        if (this.uploadradio == 4) {
          showtabs.style.top = "80%";
          showtabs.style.left = "0px";
        }
      }
      if (val == 2) {
        this.graphBgImg = require("@/assets/images/round_red.png");
        // 文字3
        this.title3 = "速度抢";
        this.title_color3 = "#ffffff";
        this.title_size3 = "14";
        this.title_famiy3 = "微软雅黑";
        this.title_border3 = "none";
        // 文字2
        this.title2 = "￥24.9";
        this.title_color2 = "#ffffff";
        this.title_size2 = "28";
        this.title_famiy2 = "微软雅黑";
        // 文字1
        this.title1 = "劵后只需:";
        this.title_color1 = "#ffffff";
        this.title_size1 = "14";
        this.title_famiy1 = "微软雅黑";
        if (this.uploadradio == 1) {
          showtabs.style.top = "54.3%";
          showtabs.style.left = "31.1%";
        }
        if (this.uploadradio == 2) {
          showtabs.style.top = "35%";
          showtabs.style.left = "31%";
        }
        if (this.uploadradio == 3) {
          showtabs.style.top = "40.8%";
          showtabs.style.left = "31.3%";
        }
        if (this.uploadradio == 4) {
          showtabs.style.top = "62%";
          showtabs.style.left = "31.1%";
        }
      }
      if (val == 3) {
        // this.graphBgImg = require("@/assets/images/long_red.png");
        // 文字1
        this.title1 = "今日推荐";
        this.title_color1 = "#ffffff";
        this.title_size1 = "20";
        this.title_famiy1 = "微软雅黑";
        if (this.uploadradio == 1) {
          showtabs.style.top = "0px";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 2) {
          showtabs.style.top = "0px";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 3) {
          showtabs.style.top = "0px";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 4) {
          showtabs.style.top = "0px";
          showtabs.style.left = "0px";
        }
      }
      if (val == 4) {
        // this.graphBgImg = require("@/assets/images/long_red.png");
        // 文字1
        this.title1 = "验货实拍";
        this.title_color1 = "#FF0000";
        this.title_size1 = "30";
        this.title_famiy1 = "微软雅黑";
        if (this.uploadradio == 1) {
          showtabs.style.top = "54.3%";
          showtabs.style.left = "31.1%";
        }
        if (this.uploadradio == 2) {
          showtabs.style.top = "35%";
          showtabs.style.left = "31%";
        }
        if (this.uploadradio == 3) {
          showtabs.style.top = "40.8%";
          showtabs.style.left = "31.3%";
        }
        if (this.uploadradio == 4) {
          showtabs.style.top = "62%";
          showtabs.style.left = "31.1%";
        }
      }
      if (val == 5) {
        this.graphBgImg = require("@/assets/images/ju_red.png");
        // 文字3
        this.title3 = "￥45.6";
        this.title_color3 = "#ffffff";
        this.title_size3 = "28";
        this.title_famiy3 = "微软雅黑";
        this.title_border3 = "none";
        // 文字2
        this.title2 = "到手价：";
        this.title_color2 = "#ffffff";
        this.title_size2 = "16";
        this.title_famiy2 = "微软雅黑";
        // 文字1
        this.title1 = "下单立减20元 赶紧抢购吧";
        this.title_color1 = "#ffffff";
        this.title_size1 = "15";
        this.title_famiy1 = "微软雅黑";
        if (this.uploadradio == 1) {
          showtabs.style.top = "55.1%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 2) {
          showtabs.style.top = "36%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 3) {
          showtabs.style.top = "41.5%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 4) {
          showtabs.style.top = "82.5%";
          showtabs.style.left = "0px";
        }
      }
      if (val == 6) {
        this.graphBgImg = require("@/assets/images/tao_red.png");
        // 文字3
        this.title3 = "￥45.6";
        this.title_color3 = "#ffffff";
        this.title_size3 = "28";
        this.title_famiy3 = "微软雅黑";
        this.title_border3 = "none";
        // 文字2
        this.title2 = "到手价：";
        this.title_color2 = "#ffffff";
        this.title_size2 = "16";
        this.title_famiy2 = "微软雅黑";
        // 文字1
        this.title1 = "下单立减20元 赶紧抢购吧";
        this.title_color1 = "#ffffff";
        this.title_size1 = "15";
        this.title_famiy1 = "微软雅黑";
        if (this.uploadradio == 1) {
          showtabs.style.top = "55.1%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 2) {
          showtabs.style.top = "36%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 3) {
          showtabs.style.top = "41.5%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 4) {
          showtabs.style.top = "82.5%";
          showtabs.style.left = "0px";
        }
      }
      if (val == 7) {
        this.graphBgImg = require("@/assets/images/none_red.png");
        // 文字4
        this.title4 = "三只松鼠";
        this.title_color4 = "#ffffff";
        this.title_size4 = "14";
        this.title_famiy4 = "微软雅黑";
        // 文字3
        this.title3 = "￥45.6";
        this.title_color3 = "#ffffff";
        this.title_size3 = "28";
        this.title_famiy3 = "微软雅黑";
        this.title_border3 = "none";
        // 文字2
        this.title2 = "到手价：";
        this.title_color2 = "#ffffff";
        this.title_size2 = "16";
        this.title_famiy2 = "微软雅黑";
        // 文字1
        this.title1 = "下单立减20元 赶紧抢购吧";
        this.title_color1 = "#ffffff";
        this.title_size1 = "15";
        this.title_famiy1 = "微软雅黑";
        if (this.uploadradio == 1) {
          showtabs.style.top = "55%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 2) {
          showtabs.style.top = "35.5%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 3) {
          showtabs.style.top = "41.2%";
          showtabs.style.left = "0px";
        }
        if (this.uploadradio == 4) {
          showtabs.style.top = "82.2%";
          showtabs.style.left = "0px";
        }
      }
      if (val == 8) {
        if (this.uploadradio == 1) {
          showtabs.style.top = "54.3%";
          showtabs.style.left = "31.1%";
        }
        if (this.uploadradio == 2) {
          showtabs.style.top = "35%";
          showtabs.style.left = "31%";
        }
        if (this.uploadradio == 3) {
          showtabs.style.top = "40.8%";
          showtabs.style.left = "31.3%";
        }
        if (this.uploadradio == 4) {
          showtabs.style.top = "62%";
          showtabs.style.left = "31.1%";
        }
      }
    },
    // 左边布局切换
    uplradchange(val) {
      console.log("上传布局-uploadradio", val);
      this.imgone = "";
      this.imgtwo = "";
      this.imgthree = "";
      this.imgfour = "";
      this.imgfive = "";
      var showtabs = this.$refs.showtabs;
      if (val == 1) {
        this.cardheight = 680;
        if (this.graphradio == 1) {
          showtabs.style.top = "53.5%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 2) {
          showtabs.style.top = "54.3%";
          showtabs.style.left = "31.1%";
        }
        if (this.graphradio == 3) {
          showtabs.style.top = "0px";
          showtabs.style.left = "0px";
        }
        if (this.graphradio == 4) {
          showtabs.style.top = "54.3%";
          showtabs.style.left = "31.1%";
        }
        if (this.graphradio == 5) {
          showtabs.style.top = "55.1%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 6) {
          showtabs.style.top = "55.1%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 7) {
          showtabs.style.top = "55%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 8) {
          showtabs.style.top = "54.3%";
          showtabs.style.left = "31.1%";
        }
      }
      if (val == 2) {
        this.cardheight = 680;
        if (this.graphradio == 1) {
          showtabs.style.top = "34%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 2) {
          showtabs.style.top = "35%";
          showtabs.style.left = "31%";
        }
        if (this.graphradio == 3) {
          showtabs.style.top = "0px";
          showtabs.style.left = "0px";
        }
        if (this.graphradio == 4) {
          showtabs.style.top = "35%";
          showtabs.style.left = "31%";
        }
        if (this.graphradio == 5) {
          showtabs.style.top = "36%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 6) {
          showtabs.style.top = "36%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 7) {
          showtabs.style.top = "35.5%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 8) {
          showtabs.style.top = "35%";
          showtabs.style.left = "31%";
        }
      }
      if (val == 3) {
        this.cardheight = 820;
        if (this.graphradio == 1) {
          showtabs.style.top = "40.3%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 2) {
          showtabs.style.top = "40.8%";
          showtabs.style.left = "31.3%";
        }
        if (this.graphradio == 3) {
          showtabs.style.top = "0px";
          showtabs.style.left = "0px";
        }
        if (this.graphradio == 4) {
          showtabs.style.top = "40.8%";
          showtabs.style.left = "31.3%";
        }
        if (this.graphradio == 5) {
          showtabs.style.top = "41.5%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 6) {
          showtabs.style.top = "41.5%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 7) {
          showtabs.style.top = "41.2%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 8) {
          showtabs.style.top = "40.8%";
          showtabs.style.left = "31.3%";
        }
      }
      if (val == 4) {
        this.cardheight = 650;
        if (this.graphradio == 1) {
          showtabs.style.top = "80%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 2) {
          showtabs.style.top = "62%";
          showtabs.style.left = "31.1%";
        }
        if (this.graphradio == 3) {
          showtabs.style.top = "0px";
          showtabs.style.left = "0px";
        }
        if (this.graphradio == 4) {
          showtabs.style.top = "62%";
          showtabs.style.left = "31.1%";
        }
        if (this.graphradio == 5) {
          showtabs.style.top = "82.5%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 6) {
          showtabs.style.top = "82.5%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 7) {
          showtabs.style.top = "82.2%";
          showtabs.style.left = "0";
        }
        if (this.graphradio == 8) {
          showtabs.style.top = "62%";
          showtabs.style.left = "31.1%";
        }
      }
    },
    // 中间顶部分类控制
    setchange(val) {
      console.log("中间顶部分类-leftshow", val);
      this.dourl = "";
      this.saveurl = "";
      if (val == 1) {
        this.uploadradio = 1;
        this.graphradio = 1;
        this.graphchange(1);
        this.cardheight = 680;
        // 文字3
        this.title3 = "29.9";
        this.title_color3 = "#FF0000";
        this.title_size3 = "20";
        this.title_famiy3 = "微软雅黑";
        this.title_border3 = "1px solid red";
        // 文字2
        this.title2 = "劵后价";
        this.title_color2 = "#FF0000";
        this.title_size2 = "14";
        this.title_famiy2 = "微软雅黑";
        // 文字1
        this.title1 = "下单立减20元";
        this.title_color1 = "#ffffff";
        this.title_size1 = "20";
        this.title_famiy1 = "微软雅黑";
      }
      if (val == 2) {
        this.cardheight = this.miaoboxheight;
        this.title1 = "精选必抢单";
        this.title_color1 = "#ffffff";
        this.title_size1 = "36";
        this.title_famiy1 = "微软雅黑";

        this.title2 = "明日预告";
        this.title_color2 = "#ffffff";
        this.title_size2 = "28";
        this.title_famiy2 = "微软雅黑";
      }
      if (val == 3) {
        this.cardheight = this.baoboxheight;

        this.title1 = "爆款汇总";
        this.title_color1 = "#ffffff";
        this.title_size1 = "36";
        this.title_famiy1 = "微软雅黑";

        this.title2 = "每日更新最火爆优质商品";
        this.title_color2 = "#ffffff";
        this.title_size2 = "16";
        this.title_famiy2 = "微软雅黑";
      }
    },
    // 上传成功7---爆品汇总上传
    uploadSuccess7(res, file, fileList, val) {
      console.log("上传7", res, file, fileList, val);
      for (let i = 0; i < this.baoList.length; i++) {
        if (i == val) {
          this.baoList[i].imgurl = `http://` + res.data.url;
          break;
        }
      }
      // this.imgone = "http://" + fileList[0].response.data.url;
      // console.log(this.imgone);
    },
    // 上传成功6---秒杀预告上传
    uploadSuccess6(res, file, fileList, val) {
      console.log("上传6", res, file, fileList, val);
      // console.log("返回fileList", fileList);
      for (let i = 0; i < this.miaoList.length; i++) {
        if (i == val) {
          this.miaoList[i].imgurl = `http://` + res.data.url;
          break;
        }
      }
      // this.imgone = "http://" + fileList[0].response.data.url;
      // console.log(this.imgone);
    },
    // 上传成功1
    uploadSuccess1(res, file, fileList) {
      // console.log("上传1", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgone = "http://" + fileList[0].response.data.url;
      // console.log(this.imgone);
    },
    // 上传成功2
    uploadSuccess2(res, file, fileList) {
      // console.log("上传2", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgtwo = "http://" + fileList[0].response.data.url;
      // console.log(this.imgtwo);
    },
    // 上传成功3
    uploadSuccess3(res, file, fileList) {
      // console.log("上传3", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgthree = "http://" + fileList[0].response.data.url;
      // console.log(this.imgthree);
    },
    // 上传成功4
    uploadSuccess4(res, file, fileList) {
      // console.log("上传4", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgfour = "http://" + fileList[0].response.data.url;
      // console.log(this.imgfour);
    },
    // 上传成功5=>自定义上传
    uploadSuccess5(res, file, fileList) {
      // console.log("上传4", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgfive = "http://" + fileList[0].response.data.url;
      // console.log(this.imgfour);
    },
    // 上传失败
    uploadError(err, file, fileList) {
      console.log("上传失败信息", err, file, fileList);
      this.$message.error(fileList);
    },
    // 限制上传参数
    beforeAvatarUpload(file) {
      console.log(file.type);
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG,PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
    // 营销推广导出为图片
    saveYXImg(val) {
      window.pageYoffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      // 先获取你要转换为img的dom节点
      var node = document.getElementById(val);
      // console.log("node", node);
      var width = node.offsetWidth; //dom宽
      var height = node.offsetHeight; //dom高
      var scale = 2; //放大倍数
      //   crossOrigin='Anonymous' //服务器路径要给图片dom设置该属性 !!!
      html2canvas(node, {
        width: width,
        heigth: height,
        backgroundColor: "#ffffff", //背景是否透明 为null 透明
        dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
        scale: scale,
        X: 0,
        Y: 0,
        scrollX: -3, //如果左边多个白边 设置该偏移
        scrollY: 0,
        useCORS: true, //是否使用CORS从服务器加载图像 !!!
        allowTaint: true //是否允许跨域图像污染画布  !!!
      }).then(canvas => {
        // console.log("canvas", canvas);
        var url = canvas.toDataURL(); //这里上面不设值cors会报错
        var a = document.createElement("a");
        a.download = "营销图"; //设置图片名称
        var event = new MouseEvent("click");
        a.href = url;
        a.dispatchEvent(event); //触发a的单击事件
      });
    },
    // 秒杀/爆品 合成为图片
    saveAsImg(val) {
      const loading = this.$loading({
        lock: true,
        text: "合成中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      window.pageYoffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      // 先获取你要转换为img的dom节点
      var node = document.getElementById(val);
      // console.log("node", node);
      var width = node.offsetWidth; //dom宽
      var height = node.offsetHeight; //dom高
      var scale = 2; //放大倍数
      //   crossOrigin='Anonymous' //服务器路径要给图片dom设置该属性 !!!
      html2canvas(node, {
        width: width,
        heigth: height,
        backgroundColor: "#ffffff", //背景是否透明 为null 透明
        dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
        scale: scale,
        X: 0,
        Y: 0,
        scrollX: -3, //如果左边多个白边 设置该偏移
        scrollY: 0,
        useCORS: true, //是否使用CORS从服务器加载图像 !!!
        allowTaint: true //是否允许跨域图像污染画布  !!!
      }).then(canvas => {
        // console.log("canvas", canvas);
        var url = canvas.toDataURL(); //这里上面不设值cors会报错

        // var a = document.createElement("a");
        // a.download = "营销图"; //设置图片名称
        // var event = new MouseEvent("click");
        // a.href = url;
        // console.log("a", a);
        // a.dispatchEvent(event); //触发a的单击事件

        this.saveurl = url;
        // console.log("url", url);
        doBaseUpload({
          file: url
        })
          .then(res => {
            if (res.code == 200) {
              loading.close();
              console.log("base上传返回", res.data.url);
              this.dourl = "http://" + res.data.url;
              this.$message.success("合成成功!");
            } else {
              this.$message.info(res.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.display {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // position: relative;
}
.display2 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.canvas_box2 {
  width: 350px;
  margin: 0 auto;
  margin-top: 10px;
  #miaocanvas {
    .position_box {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 46px;
      left: 0;
      .show_title {
        white-space: nowrap;
      }
    }
    .miaolist::v-deep {
      .el-radio__input {
        display: none;
      }
      .el-radio {
        width: 100%;
        margin-right: 0;
      }
      .el-radio__label {
        padding-left: 0px;
      }
      .miao_main {
        width: 350px;
        border-radius: 10px;
        margin-top: 10px;
        .miao_img {
          position: relative;
          box-sizing: border-box;
          border-radius: 10px;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .miao_uploadone {
            // width: 170px;
            // padding-top: 10px;
            .el-upload {
              width: 170px;
              height: 170px;
            }
          }
          .rigtitle {
            height: 100%;
            margin-left: 10px;
            .toptie {
              width: 140px;
              overflow: hidden;
              margin-left: 10px;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              flex-wrap: wrap;
              .show_title {
                width: 100%;
                white-space: nowrap;
              }
            }
          }
        }
      }
      .miao_main:hover {
        .el-icon-close {
          display: block;
        }
      }
    }
  }
}
.canvas_box3 {
  width: 350px;
  margin: 0 auto;
  margin-top: 10px;
  .top_bg {
    border-radius: 10px;
    height: 170px;
    position: relative;
    background: url("~@/assets/images/baobg.png") no-repeat center;
    .position_box {
      position: absolute;
      width: 100%;
      top: 28px;
      left: 0;
    }
  }
  .miaolist::v-deep {
    .el-radio__input {
      display: none;
    }
    .el-radio {
      width: 100%;
      margin-right: 0;
    }
    .el-radio__label {
      padding-left: 0px;
    }
    .miao_main {
      width: 350px;
      border-radius: 10px;
      margin-top: 10px;
      .miao_img {
        position: relative;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .miao_uploadone {
          // width: 170px;
          // padding-top: 10px;
          .el-upload {
            width: 170px;
            height: 170px;
          }
        }
        .rigtitle {
          height: 100%;
          margin-left: 10px;
          .toptie {
            width: 140px;
            overflow: hidden;
            margin-left: 10px;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            .show_title {
              // width: 100%;
              white-space: nowrap;
            }
            .issue_box {
              width: 100%;
              height: 50px;
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
            }
          }
        }
      }
    }
    .miao_main:hover {
      .el-icon-close {
        display: block;
      }
    }
  }
}
.widgepic {
  width: 100%;
  background-color: #f6f6f6;
  .widgepic_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .main_box {
      width: 100%;
      overflow-y: auto;
      padding-bottom: 10px;
      //   height: 675px;
      .show_top1 {
        width: 100%;
        margin-top: 10px;
        .uploadradio::v-deep {
          .el-radio__inner {
            display: none;
          }
          .el-radio {
            margin-right: 20px;
          }
          .pic1 {
            width: 51px;
            height: 76px;
            background: url("~@/assets/images/three.png");
          }
          .pic2 {
            width: 75px;
            height: 75px;
            background: url("~@/assets/images/four.png");
          }
          .pic3 {
            width: 38px;
            height: 75px;
            background: url("~@/assets/images/two.png");
          }
          .pic4 {
            width: 75px;
            height: 75px;
            background: url("~@/assets/images/one.png");
          }
          .pic1:hover {
            background: url("~@/assets/images/three_act.png");
          }
          .pic2:hover {
            background: url("~@/assets/images/four_act.png");
          }
          .pic3:hover {
            background: url("~@/assets/images/two_act.png");
          }
          .pic4:hover {
            background: url("~@/assets/images/one_act.png");
          }
          .is-checked {
            .pic1 {
              background: url("~@/assets/images/three_act.png");
            }
            .pic2 {
              background: url("~@/assets/images/four_act.png");
            }
            .pic3 {
              background: url("~@/assets/images/two_act.png");
            }
            .pic4 {
              background: url("~@/assets/images/one_act.png");
            }
          }
        }
      }
      .canvas_box {
        width: 321px;
        // height: 485px;
        margin: 0 auto;
        margin-top: 10px;
        .mycanvas {
          position: relative;

          .uploadone::v-deep {
            position: relative;
            width: 321px;
            height: 324px;
            background-color: #f6f6f6;
            box-sizing: border-box;
            border: 1px solid red;

            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
              margin-top: 26px;
            }
          }
          .uploadone:hover {
            background-color: #cccccc;
          }
          .uploadtwo::v-deep {
            width: 162px;
            height: 162px;
            box-sizing: border-box;
            border: 1px solid red;
            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
              margin-top: 15px;
            }
          }
          .uploadtwo:hover {
            background-color: #cccccc;
          }
          .uploadthree::v-deep {
            width: 162px;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid red;
            background-color: #f6f6f6;
            .el-upload {
              width: 100%;
              height: 100%;
              margin-top: 15px;
            }
          }
          .uploadthree:hover {
            background-color: #cccccc;
          }
          .uploadfour::v-deep {
            width: 162px;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid red;
            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
              margin-top: 15px;
            }
          }
          .uploadfour:hover {
            background-color: #cccccc;
          }
          .uploadfour::v-deep {
            width: 162px;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid red;
            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
              margin-top: 15px;
            }
          }
          .uploadfour:hover {
            background-color: #cccccc;
          }
          .uploadradio1 {
            .img_box::v-deep {
              height: 100%;
              position: relative;
              .el-icon-close {
                display: none;
                cursor: pointer;
                z-index: 200;
                position: absolute;
                top: 2px;
                right: 2px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                background: #fff;
                font-weight: 600;
                font-size: 20px;
                font-style: normal;
                color: #5680fe;
                text-align: center;
                border-radius: 15px;
                transition: all linear 0.5s;
              }
              .el-icon-close:hover {
                background: #607bfe;
                color: #fff;
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
              }
            }
            .img_box:hover {
              .el-icon-close {
                display: block;
              }
            }
          }
        }
      }
    }
    // 中间设置
    .main_top {
      margin: 20px auto 0;
    }
    .main_content {
      .graph_box::v-deep {
        padding: 10px;
        margin: 0 auto;
        .el-radio-group {
          margin-left: -5px;
        }
        .el-radio {
          margin-right: 8px;
          padding: 8px 0;
        }
      }
      .setgraph_box {
        .top_img {
          width: 370px;
          // height: 126px;
          margin: 0 auto;
          border-radius: 10px;
          background-color: #eeeeee;
          padding-bottom: 22px;
        }
        .top_img:hover {
          background: linear-gradient(180deg, #fee7e5, #f0ccff);
        }
      }
    }
    // 右侧盒子
    .main_box3::v-deep {
      padding: 8px;
      .el-input {
        box-sizing: border-box;
        .el-input__inner {
          border: 2px solid #409eff;
          border-radius: unset;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }
      }
      .el-button {
        // border: 2px solid #409eff;
        border-radius: unset;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      .leftline {
        display: inline-block;
        vertical-align: middle;
        width: 3px;
        height: 18px;
        background-color: #007aff;
        box-sizing: border-box;
      }
      .lefttitle {
        display: inline-block;
        vertical-align: middle;
        font-size: 16px;
        color: #007aff;
        margin-left: 3px;
      }
      .rightinfo {
        white-space: nowrap;
        line-height: 28px;
        color: #999;
      }
      .mainimg_box {
        padding: 0 8px;
        height: 216px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        .tbmainimg {
          box-sizing: border-box;
          width: 102px;
          height: 102px;
          margin-bottom: 8px;
        }
        .tbmainimg:hover {
          border: 1px solid blue;
        }
      }
      .mian_span {
        display: inline-block;
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        background-color: #f2f2f2;
      }
      .mian_span:hover {
        border: 1px solid blue;
      }
    }
  }
  .img_box {
    position: relative;
  }
  .img_box:hover {
    .el-icon-close {
      display: block;
    }
  }
  // 公共样式
  .el-icon-close {
    display: none;
    cursor: pointer;
    z-index: 200;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    font-weight: 600;
    font-size: 20px;
    font-style: normal;
    color: #5680fe;
    text-align: center;
    border-radius: 15px;
    transition: all linear 0.5s;
  }
  .el-icon-close:hover {
    background: #607bfe;
    color: #fff;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  .show_img {
    position: relative;
    width: 320px;
    height: 65px;
    margin: 0 auto;
    z-index: 200;
    background-position-y: bottom;
    background-size: 100%;
    .show_title {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 240px;
      height: 33px;
      line-height: 33px;
      // background-color: #fff;
    }
    .show_info {
      position: absolute;
      right: 2px;
      bottom: 0;
      width: 64px;
      height: 70px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      p {
        padding-top: 17px;
        width: 64px;
      }
      div {
        font-weight: 700;
        width: 45px;
        height: 27px;
        text-align: center;
        padding-bottom: 11px;
      }
    }
  }
  .show_img2 {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    z-index: 200;
    background-position-y: bottom;
    background-size: 100%;
    .show_title {
      text-align: center;
      width: 100%;
      height: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sh1 {
      align-items: flex-end;
    }
  }
  .show_img2.active {
    width: 120px;
    height: 120px;
  }
  .graph3_box::v-deep {
    // width: 411px;
    height: 342px;
    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .el-radio {
        margin-right: 0;
        .el-radio__input {
          display: none !important;
        }
      }
    }
    .graph3 {
      width: 190px !important;
      margin: 0px 0px 20px !important;
      height: 90px !important;
      border-radius: 10px;
      background-color: #eeeeee;
      padding-bottom: 0px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .iconfont_box {
    position: relative;
    width: 120px;
    height: 43px;
    text-align: center;
    .icon_i {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .sh2 {
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      line-height: 43px;
    }
    .sh3 {
      width: 100%;
      position: absolute;
      top: 29px;
      width: 56px;
      left: 9px;
      height: 52px;
      white-space: normal;
      line-height: initial;
    }
  }
  .graph3:hover {
    background: linear-gradient(180deg, #fee7e5, #f0ccff);
  }
  .bg_box {
    position: relative;
    width: 130px;
    height: 130px;
    background-color: #fff;
    border-radius: 50%;
    border: 4px solid #fe293c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 17px;
    box-sizing: border-box;
    letter-spacing: 1em;
    .bg_title {
      // position: absolute;
      font-weight: 500;
      box-sizing: border-box;
      z-index: 999;
    }
    .bg_h {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      border-top: 1px dashed #ffabb3;
      opacity: 0.5;
      font-weight: 400;
      font-style: normal;
      box-sizing: border-box;
    }
    .bg_s {
      position: absolute;
      top: 0;
      left: 50%;
      width: 1px;
      height: 100%;
      border-left: 1px dashed #ffabb3;
      opacity: 0.5;
      font-weight: 400;
      font-style: normal;
      box-sizing: border-box;
    }
  }
  .title4 {
    width: 86px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    right: 0;
  }
  .uploadfive::v-deep {
    width: 140px;
    height: 140px;
    background-color: #fff;
    border-radius: 50%;
    flex-direction: column;
    color: #5490ff;
    overflow: hidden;
    user-select: none;
    background-size: 100% 100%;
    box-sizing: border-box;
    border: 1px solid red;
    margin: 0 auto;
    .el-upload-dragger {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .el-upload {
      width: 100%;
      height: 100%;
      // margin-top: 15px;
    }
    .img_box {
      height: 100%;
      position: relative;
      .el-icon-close {
        display: none;
        cursor: pointer;
        z-index: 200;
        position: absolute;
        top: 2px;
        right: 56px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        background: #fff;
        font-weight: 600;
        font-size: 20px;
        font-style: normal;
        color: #5680fe;
        text-align: center;
        border-radius: 15px;
        transition: all linear 0.5s;
      }
      .el-icon-close:hover {
        background: #607bfe;
        color: #fff;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
      }
    }
    .img_box:hover {
      .el-icon-close {
        display: block;
      }
    }
  }
  // 定位活动标签
  .show_tabs {
    position: absolute;
    // width: 100%;
    .el-icon-close {
      display: none;
      cursor: pointer;
      z-index: 16;
      position: absolute;
      top: -10px;
      right: 2px;
      // float: right;
      width: 30px;
      height: 30px;
      line-height: 30px;
      background: #fff;
      font-weight: 600;
      font-size: 14px;
      font-style: normal;
      color: #5680fe;
      text-align: center;
      border-radius: 15px;
      transition: all linear 0.5s;
    }
    .el-icon-close:hover {
      background: #607bfe;
      color: #fff;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
    }
  }
  .show_tabs:hover {
    cursor: move;
    user-select: none;
    .el-icon-close {
      display: inline-block;
    }
  }
}
</style>
